vue-shadow-dom

import { createApp, ref, defineComponent } from 'vue'; import shadow, { type ShadowRootExpose } from 'vue-shadow-dom'; const MyShadowComponent = defineComponent({ template: ` <div style="border: 1px solid blue; padding: 10px; margin: 20px;"> <h2>Component Host</h2> <p>Content outside the shadow root. Styles here will leak unless encapsulated.</p> <shadow-root ref="shadowRef" tag="section" abstract> <template #default> <shadow-style> p { color: green; font-weight: bold; } h3 { color: darkred; } button { background-color: lightblue; padding: 8px; border: none; cursor: pointer; } </shadow-style> <h3>Shadow Root Content</h3> <p>This paragraph should be green and bold inside the shadow DOM.</p> <button @click="logShadowRoot">Log Shadow Root</button> </template> </shadow-root> <p>This paragraph is outside the shadow root.</p> </div> `, setup() { const shadowRef = ref<ShadowRootExpose | null>(null); const logShadowRoot = () => { if (shadowRef.value && shadowRef.value.shadow_root) { console.log('Shadow Root Instance:', shadowRef.value.shadow_root); // You can interact with the native ShadowRoot object directly const pElement = shadowRef.value.shadow_root.querySelector('p'); if (pElement) { console.log('Paragraph inside shadow root:', pElement.textContent); } } else { console.warn('ShadowRoot instance not available yet.'); } }; return { shadowRef, logShadowRoot }; }, }); const app = createApp(MyShadowComponent); app.use(shadow); app.mount('#app'); // To run this, you would typically have an index.html like: // <div id="app"></div>