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); |
@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
All very good points. Where I was trying to take it is be able to render a tree that looks the same before the shadow root is stamped out so that the initialisation work can be done separately. From what I can gather this is the biggest argument for SSR: perceived performance. Overall performance and TTI don't seem to be affected much by it, but it's an argument that comes up a lot. Whether or not it's valid in the grand scheme of things is somewhat irrelevant to the fact that the industry is flocking to it.
If styled-jsx is used (not a general solution, though), it would be able to scope styles prior to stamping out and distribution.
I like your solution here for declarative shadow roots, but I don't see how it can help the problem I'm trying to solve. Though, the more I try and solve it, I don't think it's solvable with shadow DOM.