diff --git a/demo-lit.html b/demo-lit.html index 5e243da..bf84d43 100644 --- a/demo-lit.html +++ b/demo-lit.html @@ -75,8 +75,17 @@

With Hydration:

- + + + + + + + + + + \ No newline at end of file diff --git a/is-land.js b/is-land.js index 932298b..1504f76 100644 --- a/is-land.js +++ b/is-land.js @@ -5,13 +5,28 @@ class Island extends HTMLElement { static prefix = "is-land--" static fallback = { - ":scope:not([ssr]) :not(:defined)": (readyPromise, node, prefix) => { + ":scope :not(:defined):not([skip])": (readyPromise, node, prefix) => { // remove from document to prevent web component init let cloned = document.createElement(prefix + node.localName); for(let attr of node.getAttributeNames()) { cloned.setAttribute(attr, node.getAttribute(attr)); } + // Declarative Shadow DOM + let shadowroot = node.shadowRoot; + if(!shadowroot) { + // polyfill + let tmpl = node.querySelector(":scope > template[shadowroot]"); + if(tmpl) { + shadowroot = node.attachShadow({ mode: "open" }); + shadowroot.appendChild(tmpl.content.cloneNode(true)); + } + } + // cheers to https://gist.github.com/developit/45c85e9be01e8c3f1a0ec073d600d01e + if(shadowroot) { + cloned.attachShadow({ mode: shadowroot.mode }).append(...[].map.call(shadowroot.childNodes, c => c.cloneNode(true))); + } + let children = Array.from(node.childNodes); for(let child of children) { cloned.append(child); // Keep the *same* child nodes, clicking on a details->summary child should keep the state of that child