3

我意识到这不是一个支持论坛；我正试图将其作为文档请求偷偷溜进去。

简短的问题：在所有方面创建与原生元素完全相同的元素的推荐方法是什么？（提供附加功能，是的，但 100% 兼容替代原生产品）

长版：

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

方式一：从Button继承

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

方式2：撰写

按照这种方式，我<button> 在 shadow DOM 中有一个，并反映了所有属性和属性（意味着对 my-button 的任何更改都会反映到buttonshadow DOM 中的元素上）。[编辑：元素不需要反映所有事件，这要归功于 shadow DOM 对事件的重新定位]

对于“方式 2”，这意味着大量的属性复制等。这可以通过 lit-element 轻松完成（所有属性的行为都是相同的，并且适用于相当长的列表）。但是……在我开始之前，我是不是进入了一个兔子洞？

我可以想到很多可能出错的事情......例如，我是否应该费心反映tabindex？form由于按钮将位于影子根中，该属性甚至会起作用吗？等等等等。

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

4

1 回答 1

1

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

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

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

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

可能的行为的一个很好的例子是FLIP 动画。

于 2021-05-11T22:32:28.090 回答