Skip to content
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.

Sign up for GitHub

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

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

Add support for declarative shadow dom #189

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
3d29bb5
Add shadowRoot nodes
whaaaley Feb 1, 2022
7308f59
Update index.js
whaaaley Feb 1, 2022
bdf803a
Treat `shadow-root` prop similar to `key`
whaaaley Feb 1, 2022
bc4b996
Forgot else if
whaaaley Feb 1, 2022
b2ef880
Add a space
whaaaley Feb 1, 2022
08ee4f1
Apply props on shadow-root root node
whaaaley Feb 1, 2022
16a3d13
Patch nodes inside shadowRoot
whaaaley Feb 1, 2022
7a3d31f
Maybe just return what patchNode returns
whaaaley Feb 1, 2022
47bef01
This is the correct spot for the shadow-root patching
whaaaley Feb 1, 2022
991ea17
Remove extra prop loop
whaaaley Feb 1, 2022
125a7bf
Update PR to the syntax currently implemented in Chrome
whaaaley Aug 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ var patchProperty = (node, key, oldValue, newValue, isSvg) => {
}
}

var createNode = (vdom, isSvg) => {
var createNode = (vdom, isSvg, shadowRoot) => {
var props = vdom.props,
node =
vdom.type === TEXT_NODE
Expand All @@ -38,11 +38,23 @@ var createNode = (vdom, isSvg) => {
? document.createElementNS(SVG_NS, vdom.tag, { is: props.is })
: document.createElement(vdom.tag, { is: props.is })

if (shadowRoot) {
node = node.attachShadow({ mode: shadowRoot })
}

for (var k in props) {
patchProperty(node, k, null, props[k], isSvg)
}

for (var i = 0; i < vdom.children.length; i++) {
var child = vdom.children[i],
shadowRoot = child.props.shadowroot

if (child.tag === "template" && shadowRoot) {
vdom.children = child.children
return createNode(vdom, isSvg, shadowRoot)
}

node.appendChild(
createNode((vdom.children[i] = vdomify(vdom.children[i])), isSvg)
)
Expand All @@ -59,6 +71,14 @@ var patchNode = (parent, node, oldVNode, newVNode, isSvg) => {
newVNode.type === TEXT_NODE
) {
if (oldVNode.tag !== newVNode.tag) node.nodeValue = newVNode.tag
} else if (node.shadowRoot) {
return patchNode(
null,
node.shadowRoot,
oldVNode,
newVNode,
isSvg
)
} else if (oldVNode == null || oldVNode.tag !== newVNode.tag) {
node = parent.insertBefore(
createNode((newVNode = vdomify(newVNode)), isSvg),
Expand Down