polymer - 最佳实践 : autonomous custom elements vs extending native HTML elements (customized built-in elements)

Question

自定义元素的一个常见做法，至少在 Polymer(最流行的 Web 组件框架)中，是定义一个新的自定义元素。恕我直言，这对 来说不是一个好习惯呈现 元素，因为该元素无法逐步呈现，必须等到它被加载(注册/定义并进一步构建)。

相反，如果元素是从原生元素扩展而来的，它可以像常规元素一样逐渐增强。我能想到的唯一原因是新元素看起来更优雅( my-element> vs <div is=my-element> )。

我在这里错过了什么吗？每种方法的优缺点是什么？

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

Answer 1

Web 组件规范的当前状态是 Apple block the agreement on the is="" attribute不鼓励以这种方式扩展原生元素。实际上，Polymer 2.0 移动到像这样的组合

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

而不是 <style is="custom-style"> .见 Polymer 2.0 readme

你也可以找到这个 article来自 component.kitchen 有趣。

因此，就目前而言(例如，至少在 Web Components v2 规范之前)，您宁愿创建包装器元素以获得最佳浏览器支持。您的示例将更改为

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