Shadow DOM Cross-Framework Usage — Complete Guide

// React wrapper for a Shadow DOM web component
import React, { useRef, useEffect } from 'react';

function MyWrapper({ value, onMyEvent, label }) {
    const ref = useRef(null);

    useEffect(() => {
        const el = ref.current;
        // Set properties (not attributes)
        el.value = value;

        // Listen for custom events
        const handler = (e) => onMyEvent(e.detail);
        el.addEventListener('my-event', handler);

        return () => el.removeEventListener('my-event', handler);
    }, [value, onMyEvent]);

    // Use className to pass classes that penetrate the shadow root
    // Regular HTML attributes like 'label' work natively
    return <my-component ref={ref} class="my-class" label={label}></my-component>;
}

// Usage:
// <MyWrapper value="test" onMyEvent={(detail) => console.log(detail)} label="Input" />

import React, { useRef, useEffect, useState } from 'react';

function CounterWrapper() {
    const ref = useRef(null);
    const [count, setCount] = useState(0);

    useEffect(() => {
        const el = ref.current;
        // React's onClick won't work for events from inside Shadow DOM
        // Use native addEventListener instead
        const handler = (e) => {
            setCount(e.detail.count);
        };
        el.addEventListener('count-changed', handler);
        return () => el.removeEventListener('count-changed', handler);
    }, []);

    return (
        <div>
            <p>Count from component: {count}</p>
            <my-counter ref={ref}></my-counter>
        </div>
    );
}

// Vue 3 component using a Shadow DOM web component
<template>
    <div>
        <p>Value: {{ componentValue }}</p>
        <!-- Vue automatically binds props -->
        <!-- Use .prop modifier for property binding -->
        <my-input
            ref="inputRef"
            :label="inputLabel"
            :model-value.prop="componentValue"
            @update:model-value="handleUpdate"
            @my-event="handleMyEvent"
        />
    </div>
</template>

<script>
export default {
    data() {
        return {
            componentValue: '',
            inputLabel: 'Enter text'
        };
    },
    methods: {
        handleUpdate(value) {
            this.componentValue = value;
        },
        handleMyEvent(detail) {
            console.log('Custom event:', detail);
        }
    }
};
</script>

// Web component designed for v-model
class VueFriendlyInput extends HTMLElement {
    static formAssociated = true;

    constructor() {
        super();
        this._internals = this.attachInternals();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
            </style>
            <input type="text" id="input">
        `;

        this.shadowRoot.getElementById('input').addEventListener('input', () => {
            const value = this.shadowRoot.getElementById('input').value;
            this._value = value;

            // Dispatch input event for v-model compatibility
            this.dispatchEvent(new CustomEvent('input', {
                bubbles: true,
                composed: true,
                detail: value
            }));
        });
    }

    get value() { return this._value || ''; }
    set value(val) {
        this._value = val;
        const input = this.shadowRoot.getElementById('input');
        if (input) input.value = val;
    }
}
customElements.define('vue-friendly-input', VueFriendlyInput);

// Vue usage: <vue-friendly-input v-model="data"></vue-friendly-input>

// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],  // Allow custom elements
    bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
        <div>
            <p>Value: {{componentValue}}</p>
            <my-counter #counter></my-counter>
            <button (click)="resetCounter()">Reset</button>
        </div>
    `
})
export class AppComponent implements AfterViewInit {
    @ViewChild('counter', { static: false }) counterRef: ElementRef;
    componentValue = 0;

    ngAfterViewInit() {
        const el = this.counterRef.nativeElement;
        el.addEventListener('count-changed', (e) => {
            this.componentValue = e.detail.count;
            // Required for Angular change detection
            this.ngZone.run(() => {});
        });
    }

    resetCounter() {
        this.counterRef.nativeElement.reset();
    }
}

class FrameworkReady extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host { display: inline-block; }
                .wrapper { padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
            </style>
            <div class="wrapper">
                <slot></slot>
            </div>
        `;
    }

    // 1. Use properties (not just attributes) for complex data
    // 2. Dispatch composed custom events
    // 3. Follow v-model conventions (value property + input event)
    // 4. Expose public methods on the element
    // 5. Use part attributes for styling
}
customElements.define('framework-ready', FrameworkReady);