Alle Gedanken oder Hinweise wären sehr willkommen.
Code: Select all
class HtmlGenMachinery extends HTMLElement {
disconnectedCallback() {
console.log("disconnectedCallback for '" + String(this.tagName) + "' element");
}
attributeChangedCallback() {
console.log("attributeChangedCallback for '" + String(this.tagName) + "' element");
}
adoptedCallback() {
console.log("adoptedCallback for '" + String(this.tagName) + "' element");
}
constructor() {
super();
console.log("constructor for '" + String(this.tagName) + "' element");
this.attachShadow({ mode: "open" });
}
connectedCallback() {
console.log("connectedCallback for '" + String(this.tagName) + "' element");
setTimeout(() => {
console.log("connectedCallback setTimeout lambda for '" + String(this.tagName) + "' element");
// Parse html
this.sourceHtml = this.sourceHtml
.replaceAll('{shadowRoot}', '(el{id}.shadowRoot)')
.replaceAll('¤%&/📍$', '`')
.replaceAll('¤%&/🧭$', '')
.replaceAll(`{content}`, this.innerHTML);
if (this.sourceHtml.includes('el{id}')) {
this.sourceHtml = "var el{id}=document.getElementById('{id}');" + this.sourceHtml;
}
for (const argStr of this.arguments) {
if (Array.isArray(argStr)) {
this.sourceHtml = this.sourceHtml.replaceAll(`{${argStr[0]}}`, this.getAttribute(argStr[1]));
} else {
this.sourceHtml = this.sourceHtml.replaceAll(`{${argStr}}`, this.getAttribute(argStr));
}
}
const newContent = document.createRange().createContextualFragment(this.sourceHtml);
this.shadowRoot.appendChild(newContent);
}, 0)
}
}
class HtmlGen extends HtmlGenMachinery { sourceHtml = `{content}`; arguments = []; }
window.customElements.define('f-html-gen', HtmlGen);
class HtmlGen_Box extends HtmlGenMachinery {
sourceHtml = `{content}`; arguments = ["color"];
}
window.customElements.define('f-html-gen-box', HtmlGen_Box);
class HtmlGen_StringProperty extends HtmlGenMachinery {
sourceHtml = `{text}
let el={shadowRoot}.getElementById("propertyParagraph");
console.log("howdy from {id} shadowRoot: " + String(Object.getOwnPropertyNames({shadowRoot})));
setTimeout(()=>{
console.log("Latent message from {id}");
},0)
el.addEventListener("input", function() {
console.log("Contents of {id} is ->\\n" + el.innerHTML + "