Open o-t-w opened 1 year ago
As a test I just tried in Chrome:
const d = document.createElement("div")
d.innerHTML = `<div>
<template shadowrootmode="open">
<p>This is in the shadow DOM</p>
<slot>
<p>This is in the light DOM</p>
<button>Light button</button>
</slot>
<button>Shadow button</button>
</template>
</div>`
And I got:
Found declarative shadowrootmode attribute on a template, but declarative Shadow DOM has not been enabled by includeShadowRoots.
I was just trying to figure out what the parsing would look like for this. I think it might start with identifying with template elements we need to walk into .content
before continuing into firstChild
/nextSibling
. That would probably fix the error assuming that it stays in the DOM like that and doesn't get swallowed. Does the template element actually have active nodes in this scenario? Most template elements contain only inert nodes.
This section of this article might answer that
This functionality is already present for Portals using the useShadow
prop.
Is it possible to expand this functionality to a generic utility component, eg something like <Shadow>
?
A simple workaround is to make a <ShadowRoot>
component, and then create the shadow root with JavaScript in there, then finally pass props.children
along.
Something like the following (I wrote it quickly, didn't test it, but it shows idea):
function ShadowRoot(props) {
let div
onMount(() => {
const root = div.attachShadow(...)
render(props.children, root) // or similar
})
return <div ref={div}></div>
}
function UsageExample() {
return <ShadowRoot>
<div>hello<div>
<style>{`
/* scoped style */
div { background: blue }
`}</style>
</ShadowRoot>
}
But this is not compatible with SSR, it creates a new root, and contexts won't automatically flow into the new root, etc. Other than that it has worked great in some places where I used it.
Declarative shadow roots will be, and that'll be really nice! Every framework that doesn't have scoped styles out of the box is gonna now have scoped styles out of the box, with the same sorts of patterns as custom elements.
Revisiting this. innerHTML
doesn't play nicely with declarative shadow DOM. When you inject HTML containing <template shadowrootmode="open">
into the page with innerHTML
, it remains just a template, whereas it's meant to instantly become shadow DOM. innerHTML
doesn't understand shadowrootmode
.
There is a new setHTMLUnsafe
method (supported in all browsers) and getHTML
method (supported only in Chrome 125) that together act as a declarative shadow DOM friendly alternative to innerHTML
.
The documentation for all of this is currently pretty terrible so I wrote about it here: https://fullystacked.net/innerhtml-alternatives/
This would epic to have it working. Combine it with solidjs/solid-router#459 and we can get awesome power of Solid.js together with Server Actions and Server Rendering. ❤️
This seems to work well:
/**
* A declarative shadow root component
*
* Hooks into SolidJS' Portal's `useShadow` prop
* to handle shadow DOM and the component lifecycle
*/
const ShadowRoot: ParentComponent = (props) => {
let div: HTMLDivElement;
return (
<div ref={div!}>
<Portal mount={div!} useShadow={true}>
{props.children}
</Portal>
</div>
);
};
Describe the bug
I would like to have the ability to use declarative shadow DOM (without custom elements) within Solid components just to get style scoping. It doesn't work and I get the error Uncaught TypeError: Cannot read properties of null (reading 'nextSibling')
Your Example Website or App
https://codesandbox.io/p/sandbox/awesome-sky-8fp8z5
Steps to Reproduce the Bug or Issue
Expected behavior
It should render a shadow tree.
Screenshots or Videos
No response
Platform
Additional context
No response