javascript - 创建一个从本地元素派生的元素——继承？作品？

Question

我知道这不是一个支持论坛；我正试图将其作为文档请求偷偷放入。

简短的问题:创建在所有方面都与原生元素完全相同的元素的推荐方法是什么？ (提供附加功能，是的，但是是 100% 兼容的直接替换原生的)

长版:

我需要扩展原生 <button>元素。目标是创建一个“ super 按钮”，它可以 100% 直接替代原生 HTML 按钮(但显然提供了消费者可以使用或不使用的额外功能)。请注意，我在这里完全不考虑样式。所以……

方式一:继承自Button

在 Polymer 中，您不能从原生元素继承这一点一直很明确。我认为情况仍然如此？

方式二:撰写

按照这种方式，我有一个 <button>在 shadow dom 中，并反射 all attributes and properties (这意味着对 my-button 的任何更改都将反射(reflect)到影子 DOM 中的 button 元素)。 [编辑:由于 shadow DOM 的事件重定向，该元素不需要反射(reflect)所有事件]

对于“方式 2”，这将意味着大量的属性复制等。这可以使用 lit-element 相当容易地完成(所有属性的行为都是相同的，并且它将适用于相当长的列表他们)。但是......在我开始之前，我是不是进入了一个兔子洞？

我能想到很多可能出错的事情...例如，我是否应该费心反射(reflect) tabindex？请问form属性甚至有效，因为按钮将位于影子根中？等等。

那么...有没有一种简单的方法可以复制特定 HTML 元素 100% 的功能，而不必反射(reflect)每个单独的属性？它会起作用吗？

Answer 1

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

我会说 2) - 如果您想要一个“ super 按钮”，那可能是唯一的方法，即使反射(reflect)所有属性很痛苦。

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

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

可能的行为的一个很好的例子是 FLIP animations .