UNPKG

alpinejs-component

Version:

Reusable HTML components powered by Alpine JS reactivity 🛸

2 lines (1 loc) • 1.27 kB
function u(e,n){let l=(n.includes("global")?[...document.styleSheets]:[...document.styleSheets].filter(({title:t})=>n.includes(t))).filter(({href:t})=>t?t?.includes(window.location.host):!0).flatMap(({cssRules:t})=>[...t]),i=new CSSStyleSheet;for(let t of l)t instanceof CSSStyleRule&&t.selectorText===":root"||i.insertRule(t.cssText);e.adoptedStyleSheets=[i]}async function h(e,n,o){function r(l){let i=document.getElementById(l),a=new DOMParser().parseFromString(i.innerHTML,"text/html").body.firstChild;return Promise.resolve(a)}let s=await r(n);o.appendChild(s),e.initTree(o)}async function d(e,n,o){let s=await(await fetch(n)).text(),i=new DOMParser().parseFromString(s,"text/html").body.firstChild;o.appendChild(i),e.initTree(o)}function f(e){class n extends HTMLElement{connectedCallback(){if(this._hasInit)return;let s=this.attachShadow({mode:"open"}),l=this.hasAttribute(":template"),i=this.hasAttribute(":url");(l||i)&&e.initTree(this);let{template:t,url:a,styles:S}=this.attributes||{},m=t?.value||"",c=a?.value||"",p=S?.value.split(",")||"";m.length&&h(e,m,s),c.length&&d(e,c,s),p.length&&u(s,p),this._hasInit=!0}}let{name:o}=window?.xComponent||{name:"x-component"};window.customElements.get(o)||(customElements.define(o,n),new n)}var g=f;export{g as default};