Menu
Hey guys,
I’m using Shadow DOM to create a custom widget, and I’ve run into what I can only assume is some janky cross-browser shenanigans. The widget is a button that shows/hides the custom component’s inner HTML on click/Enter key. So the code looks something like:
“`html
<my-button>
<!– arbitrary HTML here, this gets copied to a DIV –>
</my-button>
But it seems different browsers have different ideas about how many children the custom element has. On Firefox it works great, but on Chrome and Edge it only copies the first element (???!!!???!!!?). I’ve tried all kinds of crazy strategies, for-loops and while-loops and importNode and cloneNode and innerHTML and others. At the moment, here’s my Firefox-only “”solution”:
“`js
class myClass extends HTMLElement {
connectedCallback() {
while(this.children.length > 0) {
this.div.appendChild(this.children[0]);
}
}
}
My best guess is either there is some place that’s better for this (the constructor maybe?) or maybe this is some kind of race condition where it renders one, then the browser’s “this-is-a-shadow-Dom-thing” engine kicks in and forces children.length to be 0 when it’s not… lol idk, one of those logic-defying things that makes me love programming in C. 😆