创建一个从本地元素继承的元素-继承？组成？

Question

我意识到这不是一个支持论坛；我正试图以此作为文档要求。

简短的问题：创建在所有方面都与本机行为完全相同的元素的推荐方法是什么？ （提供额外的功能，是的，但是可以100％兼容地替代本地的）

长版：

我需要扩展本机<button>元素。目标是创建一个“超级按钮”，该按钮可以用作本机HTML按钮的100％替代（但显然提供了消费者可以使用或不使用的额外功能）。请注意，这里我完全不考虑样式。 所以...

方法1：从Button继承

在Polymer中，很明显您不能从本机元素继承。我认为情况仍然如此？

方法2：撰写

按照这种方式，我在影子dom中有一个<button>，并反映了all attributes and properties（这意味着对我的按钮所做的任何更改都会反映到影子中的button元素中DOM）。 [编辑：由于影子DOM对事件的重新定位，该元素不需要反映所有事件]

对于“方式2”，这意味着很多属性复制，等等。这可以很容易地通过lit-element完成（所有属性的行为都相同，并且适用于较长的他们）。但是...在我开始之前，我要进入兔子洞吗？

我想到了很多可能出错的事情……例如，我是否应该还要反映tabindex？由于按钮位于阴影根中，因此form属性甚至可以工作吗？依此类推。

因此...是否有一种简单的方法可以复制特定HTML元素的100％功能，而不必反映每个单个属性？而且行得通吗？

Answer 1

选项 1) 并未真正得到广泛支持 - 当 Polymer 发布时，Google 正在推动它，但现在它似乎在 Safari 可能永远不会考虑的功能列表中还有很长的路要走。 Lit 并不真正支持它。您可以使用 lit-html 作为渲染的一部分，但 LitElement 实际上是关于快速轻松地制作您自己的组件，而不是扩展内置组件。

我想说 2) - 如果你想要一个“超级按钮”，这可能是唯一的方法，即使反映所有属性是一种痛苦。

但是，如果您只想扩展按钮行为，您可以使用 Lit directives 和元素表达式。 Lit 2 的新功能（大多数示例仍在实验室中）元素表达式允许您在单个指令中设置多个属性、属性和事件。它看起来像：

html`<button ${superButtonFeature()}>Click Me</button>`

可能的行为类型的一个很好的例子是FLIP animations。