Polymer - Shadow DOM和样式

Polymer Shadow DOM和样式 - 从简单和简单的步骤学习聚合物，从基本到高级概念，包括概述，安装，元素，自定义元素，Shadow DOM和样式，事件，数据系统。

Shadow DOM是用于构建组件的DOM的新属性.

示例

在以下代码中，标题组件包括页面标题和菜单按钮.

Shadow DOM允许将子项定位在作用域子树中，称为阴影树.

   #shadow-root

阴影根根被称为阴影树的顶部，附加到树的元素称为阴影主机(header-demo).此影子主机包含一个名为shadowRoot的属性，用于指定影子根.阴影根使用主机属性标识主机元素.

阴影DOM和合成

可以渲染阴影树而不是元素的子元素，如果shadow DOM中有一个元素.可以通过添加< slot>来呈现元素的子元素.元素到阴影树.

例如，对< header-demo>使用以下阴影树.

   
   <button>Menu

将孩子添加到< my-header>元素为 :

Shadow DOM

标题取代具有上述指定子项的元素为 :

         Shadow DOM

后备内容

当没有为插槽分配节点时，可以显示后备内容.例如 :

   #shadow-root

您可以为元素提供自己的图标为 :

多级分布

您可以将slot元素分配给一个插槽，这称为多级分配.

例如，如下所示取两个级别的阴影树 :

   #shadow-root                             #shadow-root

考虑以下代码 :

   This is light DOM

扁平树的结构如下所示.

                                             This is light DOM

Shadow DOM使用以下Slot API来检查分配 :

HTMLElement.assignedSlot : 如果没有为插槽分配元素，它会为元素分配插槽并返回null.
HTMLSlotElement.assignedNodes : 当您将flatten选项设置为true时，它会提供节点列表以及插槽并返回分布式节点.
HTMLSlotElement.slotchange : 当插槽的分布式节点发生更改时，将触发此事件.

事件重定向

它指定事件的目标，在该目标中元素可以在与侦听元素相同的范围内表示.它提供了一个来自自定义元素的事件，它看起来像来自自定义元素标记，而不是来自其中的元素.

示例

以下示例显示在Polymer.js中使用事件重定向.创建一个名为index.html的文件，并将以下代码放入其中.

         Polymer Example

现在，创建另一个名为retarget-event.html的文件并包含以下代码.

//it specifies the start of an element's local DOM

输出

要运行应用程序，请导航到创建的项目目录并运行以下命令.

polymer serve

现在打开浏览器并导航到 http://127.0.0.1:8081/.以下是输出.

Polymer Retarget Events

点击以上文本并打开控制台以查看重定向事件，如以下屏幕截图所示.

Polymer Retarget Events

Shadow DOM样式

您可以使用从主机继承到影子树的样式属性设置阴影DOM的样式.

示例

#shadow-root      Demo

DOM模板

可以使用DOM模板为元素创建DOM子树.您可以为元素创建阴影根，并通过将DOM模板添加到元素中将模板复制到阴影树中.

DOM模板可以用两种方式指定 :

创建< dom-module>元素，它应该与元素的名称和id属性匹配.
定义< template> < dom-module>内的元素.

示例

样式元素的阴影DOM

阴影DOM允许使用样式属性(如字体，文本)设置自定义元素的样式颜色和类，不在元素范围之外应用它.

让我们使用:host 选择器(附加到阴影的元素)设置主机元素的样式DOM被称为主机).创建一个名为polymer-app.html的文件，并在其中添加以下代码.

运行应用程序，如前面的章节和导航到 http://127.0.0.1:8000/.以下是输出.

Polymer Shadow DOM Styling

样式开槽内容

可以在元素的模板中创建插槽，这些插槽在运行时被占用.

示例

以下示例描述了在元素模板中使用开槽内容.创建一个index.html文件并在其中添加以下代码.

         Polymer Example                                    This is Polymer.JS Slotted Content Example

现在创建另一个名为slotted-content.html的文件并包含以下代码.

运行应用程序，如上例所示，然后导航到 http://127.0.0.1:8081/.以下是输出.

Polymer Style Slotted Content

使用样式模块

您可以在元素和样式模块之间共享样式.在样式模块中指定样式，并在元素之间共享它们.

示例

以下示例说明如何在元素之间使用样式模块.创建一个index.html文件并在其中添加以下代码.

         Polymer Example

使用以下代码创建另一个名为style-module.html的文件.

现在，再创建一个名为 colors-module.html 的文件，它为元素提供样式模块，如图所示以下代码.

运行应用程序并导航到 http://127.0.0.1:8081/.以下是输出.

Polymer Style Module

使用自定义属性

自定义CSS属性可用于使用Polymer元素设置应用程序中元素的外观样式.自定义属性提供级联CSS变量，可以在自定义元素的环境之外使用，避免通过样式表散布样式数据.

自定义属性可以定义为类似于标准CSS属性，从组合的DOM树继承.在前面的示例中，您可以看到为元素定义的自定义CSS属性.

在CSS继承下，如果没有为元素定义样式，那么它将从其继承样式父代如下面的代码所示.

         p {         color: var(--paper-red-900);      }      paper-checkbox {         --paper-checkbox-checked-color: var(--paper-red-900);      }      Check Here