最佳实践：自主自定义元素与扩展本机HTML元素（自定义内置元素）

Question

自定义元素的常见做法，至少在Polymer（最流行的Web组件框架）中，是定义一个新的自定义元素。对于渲染的元素，这个恕我直言，这不是一个好习惯，因为元素不能逐步渲染，必须等到它被加载（注册/定义和进一步构建）。

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

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

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

Answer 1

使用自定义内置元素（扩展的原生HTML元素），您是原始元素的keep the semantics。

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

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

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

• 为容器使用新的容器：<dash-board>。扩展<div>元素是没有意义的。
• 扩展数据网格的table：<table is="data-grid" data-src="/rest/users">

自主自定义元素的渐进增强

未知的自定义自定义元素类似于<span>元素：其默认的CSS display属性为inline，但您可以将其更改为您想要的任何内容：inline-block，通过flex CSS规则<style>等，为其提供一些尺寸/布局，从而确保“渐进增强”。

您也可以在其中插入其他元素。它们将照常显示。

Answer 2

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

这样的组合

findById

而不是<custom-style> <style></style> </custom-style> 。见Polymer 2.0 readme

你也可以从component.kitchen中找到这个article。

因此，暂时（至少在Web Components v2规范之前），您宁愿创建包装元素以获得最佳浏览器支持。您的示例将更改为

<style is="custom-style">

Answer 3

根据W3 ​​，

Drawbacks of autonomous custom element