Reading through articles and tutorials about the Shadow DOM, I came across a description which confused me a bit:
阅读有关Shadow DOM的文章和教程,我遇到了一个让我感到困惑的描述:
"Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree."
“Shadow DOM指的是浏览器将DOM元素子树包含在文档呈现中的能力,但不包含在主文档DOM树中。”
So a Shadow tree is not part of the DOM tree? But the browser will still see it and render its contents?
那么影子树不是DOM树的一部分?但浏览器仍会看到它并呈现其内容?
3 个解决方案
#1
4
From the Shadow DOM spec,
来自Shadow DOM规范,
A document tree is a node tree whose root node is a document.
文档树是其根节点是文档的节点树。
Any element can host zero or one associated node trees, called a shadow tree.
任何元素都可以托管零个或一个关联的节点树,称为影子树。
A shadow host is an element that hosts one shadow tree.
影子主机是托管一个影子树的元素。
A shadow root is the root node of a shadow tree.
阴影根是阴影树的根节点。
A tree of trees is a tree of node trees.
树木是节点树的树。
Then, yes, shadow trees are outside the document tree, but they are still linked forming a tree of trees.
然后,是的,影子树在文档树之外,但它们仍然连在一起形成一棵树。
And yes, the shadow contents are rendered instead of the descendants of the element, as defined in CSS Scoping:
是的,渲染阴影内容而不是元素的后代,如CSS范围中所定义:
The most recently-created shadow tree on an element is the active shadow tree for that element.
元素上最近创建的阴影树是该元素的活动阴影树。
The descendants of a shadow host must not generate boxes in the formatting tree. Instead, the contents of the active shadow tree generate boxes as if they were the contents of the element instead.
阴影主机的后代不得在格式化树中生成框。相反,活动阴影树的内容生成框,就好像它们是元素的内容一样。
#2
7
I think the easiest way to understand shadow DOM is by example:
我认为理解shadow DOM的最简单方法是通过示例:
<div> <input type="range"></div>Your DOM for the above code will look exactly as you'd probably expect it:
上面代码的DOM看起来与您可能期望的完全一样:
div- input[type=range]But what your browser renders is something else: There's a horizontal line and a thumb (or knob or whatever you call it). So internally, the input has some child elements, but they are not exposed through the DOM:
但是你的浏览器呈现的是其他东西:有一条水平线和一个拇指(或旋钮或你称之为的任何东西)。所以在内部,输入有一些子元素,但它们不是通过DOM公开的:
div- input[range] - bar - thumbBut as I already wrote: Those are not exposed through the DOM, so they are hidden to you, your CSS, your JS (this is not entirely true, browsers can give you some access, for example Webkit-based browsers allow you to manipulate the appearance of the thumb in CSS via the -webkit-slider-thumb pseudo element).
但正如我已经写过:那些没有通过DOM公开,所以它们对你,你的CSS,你的JS隐藏(这不完全正确,浏览器可以给你一些访问权限,例如基于Webkit的浏览器允许你操作通过-webkit-slider-thumb伪元素在CSS中显示拇指的外观。
On the other hand, these elements need to be in the DOM somewhere to be rendered by the browser, and that's where shadow DOM comes in: Internally, the browser replaces every ocurence of input[type=range] in the DOM by the tree
另一方面,这些元素需要在DOM的某个地方由浏览器呈现,这就是shadow DOM的用武之地:在内部,浏览器用树替换DOM中输入[type = range]的每个ocurence
input[range]- bar- thumbAnd that is shadow DOM: Some elements that are children of certain elements, not because you put them there in your HTML, but because the parent element is defined to have these children (like the audio-element is defined to have a play-button) and that are not exposed through the DOM, but are generated by the browser internally.
这就是影子DOM:某些元素是某些元素的子元素,不是因为你把它们放在HTML中,而是因为父元素被定义为具有这些子元素(就像音频元素被定义为具有播放按钮)并且它不是通过DOM公开的,而是由浏览器在内部生成的。
A lot more examples and a more thorough explanation can be found here: What the Heck is Shadow DOM?
这里可以找到更多的例子和更全面的解释:什么是暗影DOM?
#3
-1
It looks like the quote came from this article titled: What the Heck is Shadow DOM?
看起来引用来自这篇文章的标题是:什么是暗影DOM?
The shadow DOM is part of the DOM (but a virtual DOM is a hidden copy of the DOM. Sorry about the earlier confusion with virtual DOM!). From reviewing this W3 Spec again, it appears that the shadow DOM is simply a reusable DOM fragment. The browser will see it & will render it's contents.
shadow DOM是DOM的一部分(但是虚拟DOM是DOM的隐藏副本。对于早期与虚拟DOM的混淆感到抱歉!)。从再次回顾这个W3规范看,影子DOM似乎只是一个可重用的DOM片段。浏览器将看到它并将呈现它的内容。
This specification describes a method of combining multiple DOM trees into one hierarchy and how these trees interact with each other within a document, thus enabling better composition of the DOM.
该规范描述了将多个DOM树组合成一个层次结构以及这些树如何在文档内彼此交互的方法,从而实现DOM的更好组成。
This technology has been around since at least 2006, when I started using .innerHTML & templates inside of JavaScript, to build reusable DOM fragments. It's not new technology. It's simply being documented in 2015 by the W3C as an official specification.
这项技术至少从2006年开始,当时我开始在JavaScript中使用.innerHTML和模板,以构建可重用的DOM片段。这不是新技术。它只是在2015年被W3C记录为官方规范。
What is interesting are these CSS attributes & pseudo-selectors, which operate on the Shadow DOM, but aren't part of the Real DOM. They are described at the bottom of the Composed Trees section of the W3 Spec.
有趣的是这些CSS属性和伪选择器,它们在Shadow DOM上运行,但不是Real DOM的一部分。它们在W3 Spec的Composed Trees部分的底部描述。
::shadow pseudo element
:: shadow伪元素
/deep/ combinator, which was replaced with a >>> combinator (or shadow piercing descendant combinator)
/ deep / combinator,替换为>>>组合器(或阴影穿孔后代组合器)
::content pseudo-element
:host pseudo-class and :host() functional pseudo-class
:host伪类和:host()函数伪类
:host-context() functional pseudo-class
:host-context()函数伪类
They kind of add to these selectors, which people sometimes use to create <div> tags with carets/pointers to other on-screen elements:
它们可以添加到这些选择器中,人们有时会使用这些选择器创建带有插入/指向其他屏幕元素的
::before & ::after
::之前和::之后
Additional Update:
I found more details at Shadow DOM 101 link. When viewing the "Hello my name is Bob... Shellie" example (about 1/2 way down the page), which is right above this text block...
我在Shadow DOM 101链接中找到了更多细节。当查看“你好我的名字是Bob ... Shellie”的例子(大约在页面的1/2方向),就在这个文本块的正上方...
Now we have achieved separation of content and presentation. The content is in the document; the presentation is in the Shadow DOM. They are automatically kept in sync by the browser when it comes time to render something.
现在我们实现了内容和演示的分离。内容在文件中;演示文稿位于Shadow DOM中。当呈现某些内容时,它们会自动由浏览器保持同步。
... we can inspect the DOM & see what the shadow DOM looks like. It looks like this, where both CSS & HTML can be encapsulated inside of a "shadow DOM" element, which is hidden inside of a <div> tag. See: https://developer.chrome.com/devtools/docs/settings-files/show-shadow-dom.png
...我们可以检查DOM并查看影子DOM的外观。看起来像这样,CSS和HTML都可以封装在“shadow DOM”元素中,该元素隐藏在
It seems like the idea is to encapsulate the CSS & HTML, so that it doesn't spill out onto other areas of the page. Nor allow other existing / on-page code, to affect what is inside of that encapsulated code block. Older examples of this encapsulation would be hidden <iframe> tag, which were designed to show ads but stop 3rd party ad code from breaking the JS on our really cool web pages.
看起来这个想法是封装CSS和HTML,因此它不会溢出到页面的其他区域。也不允许其他现有/页面上的代码影响该封装代码块内部的内容。这个封装的旧例子将是隐藏的
Here are some more Shadow DOM links:
这里有一些Shadow DOM链接:
- Shadow DOM 101
- Shadow DOM 201
- Shadow DOM 301
- Visualizing Shadow DOM Concepts
暗影DOM 101
Shadow DOM 201
Shadow DOM 301
可视化Shadow DOM概念
#1
4
From the Shadow DOM spec,
来自Shadow DOM规范,
A document tree is a node tree whose root node is a document.
文档树是其根节点是文档的节点树。
Any element can host zero or one associated node trees, called a shadow tree.
任何元素都可以托管零个或一个关联的节点树,称为影子树。
A shadow host is an element that hosts one shadow tree.
影子主机是托管一个影子树的元素。
A shadow root is the root node of a shadow tree.
阴影根是阴影树的根节点。
A tree of trees is a tree of node trees.
树木是节点树的树。
Then, yes, shadow trees are outside the document tree, but they are still linked forming a tree of trees.
然后,是的,影子树在文档树之外,但它们仍然连在一起形成一棵树。
And yes, the shadow contents are rendered instead of the descendants of the element, as defined in CSS Scoping:
是的,渲染阴影内容而不是元素的后代,如CSS范围中所定义:
The most recently-created shadow tree on an element is the active shadow tree for that element.
元素上最近创建的阴影树是该元素的活动阴影树。
The descendants of a shadow host must not generate boxes in the formatting tree. Instead, the contents of the active shadow tree generate boxes as if they were the contents of the element instead.
阴影主机的后代不得在格式化树中生成框。相反,活动阴影树的内容生成框,就好像它们是元素的内容一样。
#2
7
I think the easiest way to understand shadow DOM is by example:
我认为理解shadow DOM的最简单方法是通过示例:
<div> <input type="range"></div>Your DOM for the above code will look exactly as you'd probably expect it:
上面代码的DOM看起来与您可能期望的完全一样:
div- input[type=range]But what your browser renders is something else: There's a horizontal line and a thumb (or knob or whatever you call it). So internally, the input has some child elements, but they are not exposed through the DOM:
但是你的浏览器呈现的是其他东西:有一条水平线和一个拇指(或旋钮或你称之为的任何东西)。所以在内部,输入有一些子元素,但它们不是通过DOM公开的:
div- input[range] - bar - thumbBut as I already wrote: Those are not exposed through the DOM, so they are hidden to you, your CSS, your JS (this is not entirely true, browsers can give you some access, for example Webkit-based browsers allow you to manipulate the appearance of the thumb in CSS via the -webkit-slider-thumb pseudo element).
但正如我已经写过:那些没有通过DOM公开,所以它们对你,你的CSS,你的JS隐藏(这不完全正确,浏览器可以给你一些访问权限,例如基于Webkit的浏览器允许你操作通过-webkit-slider-thumb伪元素在CSS中显示拇指的外观。
On the other hand, these elements need to be in the DOM somewhere to be rendered by the browser, and that's where shadow DOM comes in: Internally, the browser replaces every ocurence of input[type=range] in the DOM by the tree
另一方面,这些元素需要在DOM的某个地方由浏览器呈现,这就是shadow DOM的用武之地:在内部,浏览器用树替换DOM中输入[type = range]的每个ocurence
input[range]- bar- thumbAnd that is shadow DOM: Some elements that are children of certain elements, not because you put them there in your HTML, but because the parent element is defined to have these children (like the audio-element is defined to have a play-button) and that are not exposed through the DOM, but are generated by the browser internally.
这就是影子DOM:某些元素是某些元素的子元素,不是因为你把它们放在HTML中,而是因为父元素被定义为具有这些子元素(就像音频元素被定义为具有播放按钮)并且它不是通过DOM公开的,而是由浏览器在内部生成的。
A lot more examples and a more thorough explanation can be found here: What the Heck is Shadow DOM?
这里可以找到更多的例子和更全面的解释:什么是暗影DOM?
#3
-1
It looks like the quote came from this article titled: What the Heck is Shadow DOM?
看起来引用来自这篇文章的标题是:什么是暗影DOM?
The shadow DOM is part of the DOM (but a virtual DOM is a hidden copy of the DOM. Sorry about the earlier confusion with virtual DOM!). From reviewing this W3 Spec again, it appears that the shadow DOM is simply a reusable DOM fragment. The browser will see it & will render it's contents.
shadow DOM是DOM的一部分(但是虚拟DOM是DOM的隐藏副本。对于早期与虚拟DOM的混淆感到抱歉!)。从再次回顾这个W3规范看,影子DOM似乎只是一个可重用的DOM片段。浏览器将看到它并将呈现它的内容。
This specification describes a method of combining multiple DOM trees into one hierarchy and how these trees interact with each other within a document, thus enabling better composition of the DOM.
该规范描述了将多个DOM树组合成一个层次结构以及这些树如何在文档内彼此交互的方法,从而实现DOM的更好组成。
This technology has been around since at least 2006, when I started using .innerHTML & templates inside of JavaScript, to build reusable DOM fragments. It's not new technology. It's simply being documented in 2015 by the W3C as an official specification.
这项技术至少从2006年开始,当时我开始在JavaScript中使用.innerHTML和模板,以构建可重用的DOM片段。这不是新技术。它只是在2015年被W3C记录为官方规范。
What is interesting are these CSS attributes & pseudo-selectors, which operate on the Shadow DOM, but aren't part of the Real DOM. They are described at the bottom of the Composed Trees section of the W3 Spec.
有趣的是这些CSS属性和伪选择器,它们在Shadow DOM上运行,但不是Real DOM的一部分。它们在W3 Spec的Composed Trees部分的底部描述。
::shadow pseudo element
:: shadow伪元素
/deep/ combinator, which was replaced with a >>> combinator (or shadow piercing descendant combinator)
/ deep / combinator,替换为>>>组合器(或阴影穿孔后代组合器)
::content pseudo-element
:host pseudo-class and :host() functional pseudo-class
:host伪类和:host()函数伪类
:host-context() functional pseudo-class
:host-context()函数伪类
They kind of add to these selectors, which people sometimes use to create <div> tags with carets/pointers to other on-screen elements:
它们可以添加到这些选择器中,人们有时会使用这些选择器创建带有插入/指向其他屏幕元素的
::before & ::after
::之前和::之后
Additional Update:
I found more details at Shadow DOM 101 link. When viewing the "Hello my name is Bob... Shellie" example (about 1/2 way down the page), which is right above this text block...
我在Shadow DOM 101链接中找到了更多细节。当查看“你好我的名字是Bob ... Shellie”的例子(大约在页面的1/2方向),就在这个文本块的正上方...
Now we have achieved separation of content and presentation. The content is in the document; the presentation is in the Shadow DOM. They are automatically kept in sync by the browser when it comes time to render something.
现在我们实现了内容和演示的分离。内容在文件中;演示文稿位于Shadow DOM中。当呈现某些内容时,它们会自动由浏览器保持同步。
... we can inspect the DOM & see what the shadow DOM looks like. It looks like this, where both CSS & HTML can be encapsulated inside of a "shadow DOM" element, which is hidden inside of a <div> tag. See: https://developer.chrome.com/devtools/docs/settings-files/show-shadow-dom.png
...我们可以检查DOM并查看影子DOM的外观。看起来像这样,CSS和HTML都可以封装在“shadow DOM”元素中,该元素隐藏在
It seems like the idea is to encapsulate the CSS & HTML, so that it doesn't spill out onto other areas of the page. Nor allow other existing / on-page code, to affect what is inside of that encapsulated code block. Older examples of this encapsulation would be hidden <iframe> tag, which were designed to show ads but stop 3rd party ad code from breaking the JS on our really cool web pages.
看起来这个想法是封装CSS和HTML,因此它不会溢出到页面的其他区域。也不允许其他现有/页面上的代码影响该封装代码块内部的内容。这个封装的旧例子将是隐藏的
Here are some more Shadow DOM links:
这里有一些Shadow DOM链接:
- Shadow DOM 101
- Shadow DOM 201
- Shadow DOM 301
- Visualizing Shadow DOM Concepts
暗影DOM 101
Shadow DOM 201
Shadow DOM 301
可视化Shadow DOM概念