Style Safety Feature

Shadow DOM UI Widgets: Guaranteed Zero CSS Bleed

Stop wrestling with styling conflicts. Traditional embed scripts either pollute your global styles or use sluggish, non-responsive `iframe` containers. NanoLog encapsulates all widget markup inside a native Web Component using Shadow DOM.

Get Started

The Encapsulation Boundary

By leveraging the native web browser's **Shadow DOM API**, NanoLog creates a completely isolated sub-DOM tree. Custom CSS rules are appended internally inside the shadow-root, blocking any external global CSS resets (e.g. Tailwind Preflight resets, global line-height overrides, generic header sizes) from altering widget components.

1Style Isolation: Host resets cannot penetrate the boundary. Heading, paragraph, and input sizes look identical on every app.
2Responsive Resizing: Unlike standard `iframe` boxes that require dynamic messaging sizing scripts, Web Components resize dynamically to fit viewport layouts natively.
3Lightweight Size: Saves precious bytes by avoiding multiple iframe document loading loops, compiling into a tiny gzipped bundle.

shadow-root.js

// Core Web Component mounting wrapper
class NanoLogWidget extends HTMLElement {
  constructor() {
    super();
    // 1. Create an isolated Shadow DOM root
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    // 2. Add isolated widget styles inside the root
    const style = document.createElement('style');
    style.textContent = `
      :host {
        all: initial; /* Reset all inherited styles */
        font-family: system-ui, sans-serif;
      }
      .widget-container {
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 9999;
      }
      /* No host Tailwind classes can overwrite these rules */
    `;

    // 3. Render insulated markup
    this.shadowRoot.appendChild(style);
    const container = document.createElement('div');
    container.className = 'widget-container';
    container.innerHTML = `<div class="launcher-fab">⚡ What's new</div>`;
    this.shadowRoot.appendChild(container);
  }
}

customElements.define('nanolog-widget', NanoLogWidget);

Embed Methods Compared

Web Component

Zero bleed. Native CSS reset rules inside the shadow tree. Fits fluid responsive layouts cleanly, loaded in under 19.2 KB (Brotli).

Sluggish Iframes

Slow loading. Requires separate document loading scopes. Needs dynamic sizing scripts to prevent scrolls and layout truncation.

Raw HTML Injects

High upkeep. Injected HTML nodes absorb host global resets. Headings, buttons, and custom inputs look messy and broken.

Deploy Secure Widgets in Minutes

Ensure your app styling remains pristine. Enjoy complete CSS encapsulation out of the box with NanoLog.

Start Free Setup