第一个Polymer应用 - (2)创建你自己的元素_铁锚的CSDN博客-CSDN博客

来自 : CSDN技术社区 发布时间：2021-03-25

polymer-element 元素是Polymer中自定义新元素的方式。在这里,你创建的元素叫做 post-card . template 定义了元素的内部DOM结构,或者是影子(shadow)DOM。这里就是添加自定义元素标签(markup)的地方。:host 伪类被用于shadow DOM tree中, 匹配挂载shadow DOM树的那个宿主元素(host有宿主的意思). 在这里,它匹配的就是 post-card 元素。在shadow DOM中,普通的CSS选择器作用域范围只在shadow DOM内部;  这里的 .card-header 就只会匹配到此元素的shadow DOM内部. polymer-element 标签只能在直接子元素这一级包含1个 template 标签. template 标签定义了元素的shadow DOM. 在 template 内部,允许嵌套其他的 template 标签。

 script  Polymer({}); /script 

在文件末尾处的 Polymer 方法调用会将此元素注册给浏览器,使浏览器记住它。在后面的小节中你还会和这个函数打很多交道。了解更多:
创建 post-card 实例时,其shadow DOM template 中的内容会被插入成为元素的 shadow root。这些元素会在浏览器中(rendered,渲染)显示,但并不包含在宿主元素的 children 集合中。
如果没有其他设置,所有用户添加的子元素都不会被渲染/显示(render)。例如:

 post-card h3 如果没定义放在哪个地方,就没有地方来显示这个内容! /h3 /post-card 

这里创建了一个含有单个 h3 元素作为子节点的 post-card . 如果要显示 post-card 内的 h3 ,您需要添加一个插入点(nsertion point),告诉浏览器将这个子元素渲染到 shadow DOM树的哪个地方。
-------------------------------------------------------------------------------------创建卡片结构(card structure)
找到 template 结尾处有注释的地方,添加下面的 div 和 content 标签到代码中.

 !-- CARD CONTENTS GO HERE --  div class card-header layout horizontal center  content select img /content  content select h2 /content  /div  content /content 

layout horizontal center 属性是 Polymer 中创建一个flexbox(伸缩)布局的快速方式。3个 content 元素创建了一些插入点(insertion points), shadow DOM 规范称(call)这个匹配节点的过程为派发(distribution).所有的 img 子元素都会匹配到第一个 content 标记, 并被插入到那里。第二个 content 标记选择所有的 h2 子元素。最后一个  content 标记,没有指定 select 属性, 会选择所有还未被插入的节点。(这应该是 content 元素最通用的格式)。
-------------------------------------------------------------------------------------给引入的内容设置样式
可以使用很多新的CSS选择器. post-card.html 文件已经包含 :host 选择器,用于对顶层的 post-card 元素设置样式。
要设置使用 content 添加的子元素的风格,可以在 style 标签中加上下面的CSS样式:

 polyfill-next-selector { content: .card-header h2 } .card-header ::content h2 { margin: 0; font-size: 1.8rem; font-weight: 300; polyfill-next-selector { content: .card-header img } .card-header ::content img { width: 70px; border-radius: 50%; margin: 10px; }

伪类 ::content 选择一个(根据 content 标签创建的)插入点. 在这里, ::content h2 匹配所有通过插入点派发的 h2 元素。对于不支持shadow DOM的浏览器, polyfill-next-selector 规则告诉 shadow DOM polyfill 如何将 ::content 规则转换为non-shadow DOM规则。例如,在不支持shadow DOM时, post-card h2 匹配卡片中的所有 h2 标签。注意:你不能对插入点自身设置样式, 所以使用 ::content  时必须伴随着后代选择器。编辑 index.html 文件

将新元素引入 index.html
保存 post-card.html, 并打开 index.html, 在已有的 imports 语句后加上下面的import语句:

 link rel import href post-card.html 

在 index.html 中引入后就可以使用 post-card 元素。-------------------------------------------------------------------------------------
在 index.html 文件中, core-toolbar 元素的后面直接加上一个 post-card 元素:

 ...  /core-toolbar  div class container layout vertical center  post-card  img width 70 height 70  src http://www.iteye.com/upload/logo/user/156996/59e4f109-2a2d-300f-b144-c62994e798e6.jpg  h2 大漠穷秋 /h2  h3 脚本娃娃是一个有爱的程序员社区! /h3  /post-card  /div  ...

这里指定的子元素将被分发(distributed)到 post-card 元素的各个插入点。
保存(建议编辑过程中随时保存,这是好的编码习惯)文件,部署,然后用chrome打开链接或刷新页面, 比如:http://localhost:8080/polymer-tutorial-master/starter/index.html
则显示效果如下所示: