commit 067b4d2a09819b585e79826a664c3d03fb4fd325
parent 18136363b608564ea635a99bc63dc3029e60326a
Author: finwo <finwo@pm.me>
Date: Wed, 25 Nov 2020 22:56:28 +0100
Shadow roots again, this time with stylesheet inheritance
Diffstat:
2 files changed, 10 insertions(+), 2 deletions(-)
diff --git a/fwebc.js b/fwebc.js
@@ -115,6 +115,9 @@
constructor() {
super();
+ // Initialize shadow root
+ this.root = this.attachShadow({ mode: 'open' });
+
// Initial state
this.state = {};
@@ -139,7 +142,12 @@
render() {
const fn = new Function(...Object.keys(this.state), 'return `'+template+'`;');
- try { this.innerHTML = fn(...Object.values(this.state)); } catch(e) { console.error(e); }
+ const styles = Array.from(this.root.ownerDocument.styleSheets).map(stylesheet => stylesheet.ownerNode.outerHTML);
+ try {
+ this.root.innerHTML = styles.join('') + fn(...Object.values(this.state));
+ } catch(e) {
+ console.error(e);
+ }
}
emit(event, data = {}) {
diff --git a/fwebc.min.js b/fwebc.min.js
@@ -1 +1 @@
-(e=>{"object"==typeof module&&"exports"in module?module.exports=e({fetch:require("node-fetch")}):"object"==typeof window&&(window.fwebc=e({fetch:window.fetch}))})(({fetch:e})=>{const t={},n=[],o={ext:"tag",base:"/partial"},r=t.util={isObject:e=>null!==e&&("object"==typeof e&&!Array.isArray(e)),unescape(e){const t=document.createElement("textarea");return t.innerHTML=e,0===t.childNodes.length?"":t.childNodes[0].nodeValue},observable(e,t,n=""){if(Object(e)!==e)throw new Error(`Object is not an object, got: ${e}`);if("function"!=typeof t)throw new Error(`Callback is not a function, got: ${t}`);for(const o of Object.keys(e))Object(e[o])===e[o]&&(e[o]=r.observable(e[o],t,`${n}${o}.`));return new Proxy(e,{set(e,o,s,i){if(e[o]===s)return;let c=o in e?"update":"add";const l={name:o,type:c,object:e};return"update"==c&&(l.oldValue=e[o]),e[o]=Object(s)===s?r.observable(s,t,`${n}${o}.`):s,t([l]),!0},deleteProperty(e,n,o){if(!(n in e))return;const r={name:n,type:"delete",object:e,oldValue:e[n]};return delete e[n],t([r]),!0}})}};return t.cfg=(e=>{Object.assign(o,e)}),t.install=(e=>{"function"==typeof e&&n.push(e)}),t.uninstall=(e=>{const t=n.indexOf(e);~t&&n.splice(t,1)}),t.register=((e,o)=>{if(window.customElements.get(e))return;let s=document.createElement("template");for(s.innerHTML=o;1==s.content.children.length&&s.content.firstChild instanceof HTMLTemplateElement;)s=s.content.firstChild;if(s.content.firstChild instanceof HTMLTemplateElement){const e=s.content.firstChild;s.content.prepend(...e.content.children),s.content.removeChild(e)}let i="";for(const e of[...s.content.children])e instanceof HTMLScriptElement&&(e.getAttribute("src")||(i+=e.innerHTML,s.content.removeChild(e)));s=r.unescape(s.innerHTML),window.customElements.define(e,class extends HTMLElement{constructor(){super(),this.state={};for(const e of n)e(this);new Function(i).call(this),this.dependencies&&this.dependencies.forEach(t.load),this.state=r.observable(this.state,()=>this.emit("update")),this.on("update",this.render.bind(this)),this.render()}render(){const e=new Function(...Object.keys(this.state),"return `"+s+"`;");try{this.innerHTML=e(...Object.values(this.state))}catch(e){console.error(e)}}emit(e,t={}){const n=new CustomEvent(e,t);this.dispatchEvent(n)}on(e,t){this.addEventListener(e,t)}})}),t.load=(n=>{e(`${o.base}/${n.replace(/-/g,"/")}.${o.ext}`).then(e=>e.text()).then(e=>{t.register(n,e)})}),t});
+(e=>{"object"==typeof module&&"exports"in module?module.exports=e({fetch:require("node-fetch")}):"object"==typeof window&&(window.fwebc=e({fetch:window.fetch}))})(({fetch:e})=>{const t={},n=[],o={ext:"tag",base:"/partial"},r=t.util={isObject:e=>null!==e&&("object"==typeof e&&!Array.isArray(e)),unescape(e){const t=document.createElement("textarea");return t.innerHTML=e,0===t.childNodes.length?"":t.childNodes[0].nodeValue},observable(e,t,n=""){if(Object(e)!==e)throw new Error(`Object is not an object, got: ${e}`);if("function"!=typeof t)throw new Error(`Callback is not a function, got: ${t}`);for(const o of Object.keys(e))Object(e[o])===e[o]&&(e[o]=r.observable(e[o],t,`${n}${o}.`));return new Proxy(e,{set(e,o,s,i){if(e[o]===s)return;let c=o in e?"update":"add";const l={name:o,type:c,object:e};return"update"==c&&(l.oldValue=e[o]),e[o]=Object(s)===s?r.observable(s,t,`${n}${o}.`):s,t([l]),!0},deleteProperty(e,n,o){if(!(n in e))return;const r={name:n,type:"delete",object:e,oldValue:e[n]};return delete e[n],t([r]),!0}})}};return t.cfg=(e=>{Object.assign(o,e)}),t.install=(e=>{"function"==typeof e&&n.push(e)}),t.uninstall=(e=>{const t=n.indexOf(e);~t&&n.splice(t,1)}),t.register=((e,o)=>{if(window.customElements.get(e))return;let s=document.createElement("template");for(s.innerHTML=o;1==s.content.children.length&&s.content.firstChild instanceof HTMLTemplateElement;)s=s.content.firstChild;if(s.content.firstChild instanceof HTMLTemplateElement){const e=s.content.firstChild;s.content.prepend(...e.content.children),s.content.removeChild(e)}let i="";for(const e of[...s.content.children])e instanceof HTMLScriptElement&&(e.getAttribute("src")||(i+=e.innerHTML,s.content.removeChild(e)));s=r.unescape(s.innerHTML),window.customElements.define(e,class extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.state={};for(const e of n)e(this);new Function(i).call(this),this.dependencies&&this.dependencies.forEach(t.load),this.state=r.observable(this.state,()=>this.emit("update")),this.on("update",this.render.bind(this)),this.render()}render(){const e=new Function(...Object.keys(this.state),"return `"+s+"`;"),t=Array.from(this.root.ownerDocument.styleSheets).map(e=>e.ownerNode.outerHTML);try{this.root.innerHTML=t.join("")+e(...Object.values(this.state))}catch(e){console.error(e)}}emit(e,t={}){const n=new CustomEvent(e,t);this.dispatchEvent(n)}on(e,t){this.addEventListener(e,t)}})}),t.load=(n=>{e(`${o.base}/${n.replace(/-/g,"/")}.${o.ext}`).then(e=>e.text()).then(e=>{t.register(n,e)})}),t});
