-
Notifications
You must be signed in to change notification settings - Fork 78
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add support for declarative shadow dom #189
base: main
Are you sure you want to change the base?
Conversation
Rename `slot` to `attach` Add `children` variable A root element is required inside `shadow-root` vnodes
After some simple tests, it seems like patch doesn't need to be changed for this to work. Let me know if I'm missing something. Here is an updated codepen that includes subsequent patching: https://codepen.io/dustindowell/pen/rNYeLxg EDIT: Ok there's problems. |
I think this is ok
I believe I've fixed everything. |
@whaaaley Awesome. How are you supporting JSX in your pen? |
@jorgebucaran I'm using the typescript option in the pen settings then running that through a function based originally on zaceno's jsx pragma that I tweaked a bit. I just pasted it into the pen for experimenting. |
@jorgebucaran I don't know if you're interested in supporting declarative shadow DOM at all. However, last year Chrome added support for declarative shadow DOM syntax. I was unaware of that syntax at the time of this PR. If you're not sold on adding support yet, totally fine, though it would help me out a getting static rendering and SSR working with Superfine views which use shadow DOM. (Isomorphic code and all that) The syntax Chrome supports. <div> <!-- this div has a shadow root attached -->
<template shadowroot='open'> <!-- this template tag gets obliterated by the browser -->
<h1>hello world</h1> <!-- contents are added to the shadow root -->
<style>
h1 { color: red; }
</style>
</template>
</div> Here's a codepen showcasing the above syntax. Some details of my changes in my last commit to this PR. I removed what I had previously and did something different. When iterating over children I check for a shadow root template, If that check is true I "abort" appending children and forward the contents of that template to a new |
Thanks, @whaaaley. I'll have a look at this. 👍 |
This addresses my issue #188.
This PR would allow you to write views that create
shadow-roots
. For example when using JSX:Where the DOM output would look like: (The root
h1
insideshadow-root
is required to mount children into it and the parentdiv
has to exist so we have a place to mount theshadow-root
to.)Here's a codepen of the PR in action. https://codepen.io/dustindowell/pen/rNYeLxg
If this is not something you're interested in it's no problem! I just think it's really cool to have encapsulation of styles and scripts without having to touch the custom elements api!
To briefly walk over the changes.
slot
variable, because children will need to go into theshadow-root
instead of the original node if the propertyshadow-root
exists.<div>
.I defaulted to(see changes)div
because I couldn't think of a good way to configure that. This is maybe something that could adjusted.node.appendChild
toslot.appendChild
so the children nodes are appended to the correct parent node.EDIT:
Perhaps a solution to configuring the node you attach inside the(see changes)shadow-root
would be to not allow "fragments" inside a node which has ashadow-root
property. I'll think about this and make some changes.EDIT 2:
I also didn't account for patching. 😅 So I do have some work to do still.(patching works fine)