Comments (11)
They do not get cloned in Gecko (except for printing as a special case). A new shadow root is attached when the clone gets inserted into the document.
from dom.
Does anyone know what Blink and WebKit do?
Blink does not clone the shadow root at all for cloneNode(false)
, at least currently.
Or so will throw after cloning if we clone the shadow tree. Maybe fine? You kinda need to deal with that for moves inside the document.
This is a good point. I'm really starting to think general clonable
shadow roots in the main page might cause more problems than they solve. At the very least we need whatwg/html#10107 resolved.
But it sounds like we have rough consensus that modulo the other clonable
issues, cloneNode(false)
should deep-clone the shadow root. That's nice because that's actually already what the spec says:
7.3 If the clone children flag is set, then for each child child of node’s shadow root, in tree order: append the result of cloning child with document and the clone children flag set, to copy’s shadow root.
from dom.
cc @avandolder
from dom.
We should probably follow the expectation when cloning UA-provided elements with shadow roots, which would be the option 1; deep cloning the shadow root. (If I'm not misunderstanding how they work, cc @emilio)
from dom.
Cloning the shadow tree completely makes sense to me. It does make me wonder if we at some point need to provide more cloning options.
cc @rniwa
from dom.
Sounds like 3 votes (including myself) for deep-cloning the shadow tree, and one for not cloning it. @emilio would you be ok changing to a deep clone behavior?
from dom.
Yeah, I don't mind either way, I'm just saying that that's not the built-in shadow tree behavior at least in Gecko.
Might be worth checking with @justinfagnani about the ergonomics of this for authors too.
E.g., code that does:
connectedCallback() {
this.attachShadow({ ... });
}
Or so will throw after cloning if we clone the shadow tree. Maybe fine? You kinda need to deal with that for moves inside the document.
So over-all I think given ^ I'm fine with cloning the shadow tree. But hopefully I'm not missing something.
from dom.
Yeah, I don't mind either way, I'm just saying that that's not the built-in shadow tree behavior at least in Gecko.
Does anyone know what Blink and WebKit do?
from dom.
Yeah, I don't mind either way, I'm just saying that that's not the built-in shadow tree behavior at least in Gecko.
Might be worth checking with @justinfagnani about the ergonomics of this for authors too.
E.g., code that does:
connectedCallback() { this.attachShadow({ ... }); }Or so will throw after cloning if we clone the shadow tree. Maybe fine? You kinda need to deal with that for moves inside the document.
Yes, you would never write code like that because moves are very common. You either call attachShadow()
in the constructor or gate it and call it on the first connection only.
So over-all I think given ^ I'm fine with cloning the shadow tree. But hopefully I'm not missing something.
I actually don't see how cloning the shadow tree is that useful at all in the general case. It's so common that the shadow root depends on non-clonable state, that the only components this would work for would have to be completely static.
from dom.
I guess the main issue here is that we need better test coverage for this scenario?
from dom.
Related Issues (20)
- Proposal for built-in method to synchronize elements with virtual DOM representation
- another version of `Element.prototype.contains` that considers slotted elements as children HOT 2
- Variable strength aborting HOT 1
- Proposal: DOM APIs in web workers? HOT 42
- clone with clone children flag set should append clone before cloning children HOT 2
- Provide a "deep clone" shorthand HOT 1
- Explicitly update the child's parent HOT 2
- Support for HTML/XML stream parsing/rewriting. HOT 4
- matchMedia-like API for element matches
- MutationOvserver and DOMNodeInsertedIntoDocument HOT 1
- Add guidance about using DOMTokenList
- Elements with Fallback, Proxy, Replacement, Substitute, or Surrogate Elements
- Selecting Events with Style HOT 6
- Element.attachShadow should set the declarative flag to false of an existing declarative shadow dom. HOT 4
- Should attachShadow throw or override when an existing declarative shadow root doesn't match? HOT 18
- Corresponding attribute for clonable of ShadowRootInit? HOT 3
- Support for appending a cloned template adjacent to an existing element HOT 1
- Make some ShadowRoot attributes mutable
- Atomic move operation for element reparenting & reordering HOT 43
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dom.