Skip to content

Instantly share code, notes, and snippets.

@justinfagnani

justinfagnani/index.html

Last active May 6, 2024 05:12
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save justinfagnani/936791248120749ff1f8188f1f4064d9 to your computer and use it in GitHub Desktop.
Save justinfagnani/936791248120749ff1f8188f1f4064d9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html>
<head>
<script src="shadow-root.js"></script>
</head>
<div>
<div slot="main">
I'm some projected content.
</div>
<shadow-root>
<template>
I'm some template content in a shadow-root.
<slot name="main"></slot>
<div>
<div>
Nested project content
</div>
<shadow-root>
<template>
<slot></slot>
</template>
</shadow-root>
</div>
</template>
</shadow-root>
</div>
</html>
Raw
shadow-root.js
class ShadowRootElement extends HTMLElement {
connectedCallback() {
const template = this.children[0];
if (template && template.tagName === 'TEMPLATE') {
const parent = this.parentElement;
let shadow = parent.shadowRoot;
if (!shadow) {
shadow = parent.attachShadow({mode: 'open'});
}
const content = document.importNode(template.content, true);
shadow.appendChild(content);
}
}
}
customElements.define('shadow-root', ShadowRootElement);
@treshugart
Copy link

treshugart commented May 26, 2017 •
edited

@justinfagnani I was just doing some work on the serialisation aspect of this and mini-filling shadow DOM (to work with Undom) on the server and was wondering if you knew if crawlers will index content. I know querySelector calls won't go into them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment