Polymer 自定义元素标签出现在 DOM

Question

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

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

<my_custom_element></my_custom_element>

自定义元素的模板是：

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

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

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

Answer 1

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

Polymer custom element tag appearing in the DOM