vue-shadow-dom
Version:
Shadow dom support for Vue
3 lines (2 loc) • 2.12 kB
JavaScript
import{defineComponent as e,h as o,ref as t,computed as a,reactive as r,onBeforeMount as s,onMounted as d,watch as n,Teleport as l}from"vue";function c(e,o){return u(e,e.childNodes,o)}function u(e,o,{mode:t="open",delegatesFocus:a=!1}={mode:"open"}){try{const r=e.shadowRoot;if(null!=r)return void console.error("[shadow] Attach shadow multiple times",e,o,r);{const r=e.attachShadow({mode:t,delegatesFocus:a});return o&&function(e,o){const t=document.createDocumentFragment();for(const e of o)t.appendChild(e);e.appendChild(t)}(r,o),r}}catch(t){console.error("[shadow] make shadow-root failed",e,o),console.error(t)}}const h=document.createDocumentFragment(),i=e({props:{media:String,nonce:String},setup:(e,{slots:t})=>()=>o("style",{media:e.media,nonce:e.nonce},t.default?.())}),p=e({props:{mode:{type:String,default:"open"},delegatesFocus:{type:Boolean,default:!1},abstract:{type:Boolean,default:!1},tag:{type:String,default:"div"},adoptedStyleSheets:{type:Array}},emits:["error"],setup(e,{slots:c,expose:i,emit:p}){const m=t(!1),v=t(),w=t(),f=t(),y=a((()=>f.value??h));return i(r({shadow_root:f})),s((()=>{m.value=e.abstract})),d((()=>{try{m.value?w.value.parentElement.shadowRoot?f.value=w.value.parentElement.shadowRoot:f.value=u(w.value.parentElement,void 0,{mode:e.mode,delegatesFocus:e.delegatesFocus}):f.value=u(v.value,void 0,{mode:e.mode,delegatesFocus:e.delegatesFocus}),f.value?.styleSheets}catch(e){console.error(e),p("error",e)}})),n([f,()=>e.adoptedStyleSheets],(([e,o])=>{if(e&&o)try{e.adoptedStyleSheets=o}catch(e){console.error(e),p("error",e)}})),()=>{const t=o(l,{ref:w,to:y.value},[c.default?.()]);return m.value?t:o(e.tag,{ref:v},t)}},install:m,Style:i});function m(e){e.component("shadow-root",p),e.directive("shadow",{beforeMount(e){console.warn("[VueShadowDom] Deprecated v-shadow directive, use <shadow-root> component"),c(e)}})}var v={ShadowRoot:p,ShadowStyle:i,shadow_root:p,shadow_style:i,install:m};export{p as ShadowRoot,i as ShadowStyle,v as default,m as install,c as makeShadow,u as makeShadowRaw,p as shadow_root,i as shadow_style};
//# sourceMappingURL=shadow.esm-bundler.prod.mjs.map