出现在 DOM 中的 Polymer 自定义元素标签答案

【问题标题】：Polymer custom element tag appearing in the DOM出现在 DOM 中的 Polymer 自定义元素标签
【发布时间】：2015-07-01 18:22:34
【问题描述】：

我刚刚开始学习 Polymer 自定义元素。

我创建了一个非常简单的自定义元素，其用法如下：

<my_custom_element></my_custom_element>

自定义元素的模板是：

 <template>
   <span>Hello</span>
 </template>

如果我使用 Chrome 开发工具检查 DOM，我注意到my_custom_element 标记出现在 DOM 中。我没想到会这样。我期待这个标签将被模板内容替换。 my_custom_element 本身代表什么？

我还读到:host 可用于从内部定义自定义元素的样式，并用于设置宿主元素本身的样式。但是我还是不明白以自己的方式设置宿主元素的样式意味着什么。宿主元素不是由它的模板内容定义的吗？

【问题讨论】：

【解决方案1】：

Web 组件模型不使用<my-custom-element> 作为占位符，而是作为具有复杂行为和自身内容的真实且真实的 HTML 元素。

【讨论】：

但是从内容的角度来看，自定义元素不是由其模板内容定义的吗（可能还有对该内容进行的任何其他动态更改）？我仍然没有完全掌握能够将样式应用于自定义元素本身的概念。除非 Polymer 将模板内容包装在 div 标签中，并将样式应用于 div？
Polymer 不会“包装”您的自定义元素，它只是不会将其从页面中删除。当您将<my-element> 放在页面上时，它就真的存在了。 Polymer 赋予它可以用事物“填充”该元素的行为，但它会一直存在。这意味着您还可以使用 css my-element {} 选择器在外部设置该元素的样式，为其指定类、ID 等。