在HTML中投影阴影 [英] Shadow dom in HTML

问题描述

我最近已经听说过Shadow DOM。在观看有关Angular 2发布的视频时，主持人反复提到Shadow DOM没有明确表达。 Shadow DOM 的真正含义是什么？

解决方案

a href =http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/ =nofollow> Heck是Shadow DOM？ ：

Shadow DOM是指浏览器将DOM元素的子树
包含到文档呈现中的能力，但不包含在
主文档的DOM树中。

一个重要的用例是使用网页上的视频控件。标记仅显示一个视频标记，包含一些属性和源标记。所有要运行的视频操作的附加代码都隐藏在Shadow DOM中，并且不可用于页面的其余部分。标签的实际标记，javascript和样式被封装，这隐藏了每个浏览器供应商已经编写的视频控件的实现细节。

所以当它在那里时在DOM中，它隐藏在呈现它的页面中。因此，要查看Shadow DOM，可以在Chrome中的开发工具下启用它。

简短的回答是，Shadow DOM是组成Web组件的四种技术之一。

对于定义，Web组件是：W3C的组件平台，允许从标准化构建块构建网站。 Web组件包含自定义元素，Shadow DOM和HTML导入和模板。

Shadow DOM是一种Web组件技术（尽管每个组件都可以单独使用）：

1. 自定义元素：是创建自己的自定义HTML标记和元素的功能。他们可以拥有自己的脚本行为和CSS样式。它们是Web组件的一部分，但它们也可以单独使用。


2. HTML模板：HTML模板元素是一种用于保存客户端内容的机制，页面被加载，但可能随后在运行时使用JavaScript实例化。将模板看作是存储的内容片段，以供以后在文档中使用。
   
3. Shadow DOM：为Web组件中的JavaScript，CSS和模板提供封装。 Shadow DOM使它与主文档的DOM保持独立。您也可以在Web组件之外单独使用Shadow DOM。


4. HTML导入：旨在成为Web组件的打包机制，但您也可以单独使用HTML导入。您可以通过在HTML文档中使用标签来导入HTML文件。 / shadow-dom-introduction /rel =nofollow> Shadow DOM简介。
   
   

   I've been hearing about Shadow DOM recently. While watching a video about the release of Angular 2 the presenter repeatedly made mention of Shadow DOM without clear expressions. What does Shadow DOM really mean?

   解决方案

   The best explanation I've found is this from What the Heck is Shadow DOM? shown below:

   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.

   An important use case would be with video controls on a web page. The markup only shows a video tag, with some attributes and source tags. The addtional code for all the video operations to work is hidden in the Shadow DOM and not available to the rest of the page. The actual markup, javascript, and styles for the tag are encapsulated, which hides the implementation details of the video controls that each browser vendor has already written.

   So while it's there in the DOM, its hidden from the page that renders it. So, to view the Shadow DOM, you can enable it under Dev Tools in Chrome.

   The short answer is that the Shadow DOM is one of four technologies that make up Web Components.

   For a definition, Web Components are: A component platform from the W3C that allows Web sites to be constructed from standardized building blocks. Web Components comprise Custom Elements, Shadow DOM and HTML Imports and Templates.

   Shadow DOM is a technology of Web Components (although each can be used separately):

   1. Custom Elements: is a capability for creating your own custom HTML tags and elements. They can have their own scripted behavior and CSS styling. They are part of Web Components but they can also be used by themselves.
   2. HTML Templates: The HTML template element is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript. Think of a template as a content fragment that is being stored for subsequent use in the document.
   3. Shadow DOM: provides encapsulation for the JavaScript, CSS, and templating in a Web Component. Shadow DOM makes it so these things remain separate from the DOM of the main document. You can also use Shadow DOM by itself, outside of a web component.
   4. HTML Imports: is intended to be the packaging mechanism for Web Components, but you can also use HTML Imports by itself. You import an HTML file by using a tag in an HTML document.

   See Introduction to the Shadow DOM.

   这篇关于在HTML中投影阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！