自定义元素的常见做法，至少在Polymer（最流行的Web组件框架）中，是定义一个新的自定义元素。对于渲染的元素，这个恕我直言，这不是一个好习惯，因为元素不能逐步渲染，必须等到它被加载（注册/定义和进一步构建）。
相反，如果元素从本机元素扩展，它可以像常规元素那样逐渐增强。我能想到的唯一原因是新元素看起来更优雅（my-element> vs <div is=my-element>）。
我在这里遗漏了什么吗？每种方法的优缺点是什么？
更新：根据其中一条评论，两种方法在渐进增强方面都是相同的。但是，我已经了解了两种方法from here之间的差异，因此，这个问题仍然有效。
答案 0 :(得分：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>等，为其提供一些尺寸/布局，从而确保“渐进增强”。
您也可以在其中插入其他元素。它们将照常显示。
答案 1 :(得分：1)
当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">答案 2 :(得分：0)