Polymer 最佳实践：自主定制元素与扩展原生HTML元素（定制内置元素）

至少在Polymer（最流行的Web组件框架）中，自定义元素的常见做法是定义新的自定义元素。对于渲染的元素来说，IMHO不是一个好的做法，因为该元素无法逐步渲染，必须等待加载（注册/定义并进一步构建）后才能渲染

相反，如果该元素是从本机元素扩展而来的，则可以像常规元素一样逐步增强它。我能想到的唯一理由是新元素看起来更优雅（

myelement>

vs

）

我是不是遗漏了什么？每种方法的优缺点是什么

更新：根据其中一条评论，这两种方法在渐进增强方面是相同的。但是，我对这两种方法之间的差异了解了很多，因此，这个问题仍然有效。

对于定制的内置元素（扩展的本机HTML元素），您可以使用原始元素

使用自主自定义元素（新的），您可以定义自己的语义

因此，这两个是互补的。您将在同一个项目中使用这两种语法，每种语法取决于每个组件的需求

---

用例：如果您想创建一个包含数据网格的dashbord，该数据网格将从REST服务获取其内容：

• 为容器使用新的：
  。扩展
  元素没有任何意义
• 扩展数据网格的

  表

  ：

---

自主定制元素的渐进增强功能

未知的自治自定义元素类似于

元素：它的默认CSS

显示属性是
内联
，但您可以通过
CSS规则将其更改为任何您想要的：
内联块
，
flex
，等等，以给它一些维度/布局，从而确保“渐进增强”

也可以在其中插入其他元素。它们将照常显示。
Web组件规范的当前状态是不鼓励以这种方式扩展本机元素。实际上，聚合物2.0会向如下方向移动

<custom-style>
   <style></style>
</custom-style>



而不是
。看

您也可以从component.kitchen中发现这一点

因此，目前（至少在WebComponents v2规范之前）您更愿意创建包装器元素以获得最佳浏览器支持。你的例子会变成

<my-element>
  <!-- the "extended" native element is wrapped -->
  <div></div>
</my-element>


根据W3C，您如何获得自治自定义元素的渐进增强？能否提供一份参考？关于自治自定义元素的行为，如节、跨度或。是否保证ACE在注册前会显示任何内容？