如何使用Web组件修改标准HTML元素？

Question

我已经了解了如何创建自己的Web组件，可以为其分配自定义属性和封装在Shadow DOM中的标记。但是，如何修改已注册的标准HTML元素？

我注意到Polymer已经这样做了，因为您可以将flex和layout等属性添加到标准HTML元素中。

<div horizontal layout>
    <div>Alpha</div>
    <div flex>Beta (flex)</div>
    <div>Gamma</div>
</div>

我看过，但我找不到任何可以解释如何执行此操作的内容。

Answer 1

对于聚合物的布局属性，这些纯粹是css钩子：https://github.com/Polymer/polymer/blob/master/layout.html。我想你也要求功能/装饰。自定义元素没有这个概念，但您可以创建一个远离您定义的自定义属性的元素。

例如，core-header-panel知道如何处理具有main属性的子元素：

<core-header-panel>
  ...
  <div main>Main content</div>
</core-header-panel>