Last active
May 6, 2024 05:12
-
-
Save justinfagnani/936791248120749ff1f8188f1f4064d9 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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
querySelectorcalls won't go into them.