mirrors/is-land
1
0
Fork 0
mirror of https://github.com/11ty/is-land.git synced 2025-12-23 12:26:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Updates with new version

Browse source
This commit is contained in:
Zach Leatherman 2022-11-11 21:55:13 -06:00
parent d5306f7538
commit bf735a1fa6
2 changed files with 26 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

11
demo-lit.html
View file

@ -75,8 +75,17 @@
</is-land>
<p>With Hydration:</p>
<is-land on:visible ssr import="/lib/lit/lit-component.js">
<is-land on:interaction import="/lib/lit/lit-component.js">
<button>Hydrate me</button>
<lit-component name="World"></lit-component>
</is-land>
<is-land on:interaction import="/lib/lit/lit-component.js">
<button>Hydrate me</button>
<lit-component name="World"></lit-component>
</is-land>
<lit-component name="World"></lit-component>
</body>
</html>

17
is-land.js
View file

@ -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