Я понимаю, что это не форум поддержки; Я пытаюсь ввести это как запрос документации.

Короткий вопрос: каков рекомендуемый способ создания элементов, которые ведут себя точно так же, как собственные, во всех отношениях? (предлагая дополнительные функции, да, но будучи на 100% совместимой заменой собственных)

Длинная версия:

Мне нужно расширить собственный <button> элемент. Цель состоит в том, чтобы создать «суперкнопку», которую можно использовать как 100% заменяющую встроенную HTML-кнопку (но, очевидно, предлагает дополнительную функциональность, которую потребители могут использовать или нет).). Пожалуйста, обратите внимание, что я полностью исключаю стиль из уравнения здесь. Итак…

Способ 1: наследовать от кнопки

В Polymer всегда было ясно, что вы не можете наследовать от собственного элемента. Я предполагаю, что это все еще так?

Способ 2: Создание

Следуя этому пути, у меня есть a <button> в теневом dom и отражают все атрибуты и свойства (это означает, что любое изменение my-button будет отражено на button элементе в теневом DOM). [ОТРЕДАКТИРОВАНО: элементу не нужно отражать все события, благодаря перенацеливанию событий shadow DOM]

Для «Способа 2» Это означало бы большую репликацию атрибутов и т. Д. Это можно довольно легко сделать с помощью lit-element (поведение для всех атрибутов будет идентичным, и оно будет применяться к довольно длинному списку из них). Но … прежде чем я доберусь до этого, я вхожу в кроличью нору?

Я могу придумать так много вещей, которые могут пойти не так… например, должен ли я вообще беспокоиться о отражении tabindex? Будет form ли атрибут вообще работать, поскольку кнопка будет находиться в теневом корне? И так далее и тому подобное.

Итак… Есть ли простой способ воспроизвести 100% функциональности определенного элемента HTML без необходимости отражать каждый отдельный атрибут? И будет ли это работать?

Вариант 1) на самом деле широко не поддерживается — Google настаивал на этом, когда был выпущен Polymer, но теперь кажется, что это очень долгий путь вниз по списку функций, к которым Safari, вероятно, никогда не доберется. Lit на самом деле не поддерживает его. Вы могли бы использовать lit-html как часть вашего рендеринга, но LitElement на самом деле предназначен для быстрого и простого создания ваших собственных компонентов, а не для расширения встроенных.

Я бы сказал 2) — если вам нужна «суперкнопка», это, вероятно, единственный способ, даже если отражение всех свойств — это боль.

Однако, если вы просто хотите расширить поведение кнопок, вы можете использовать директивы Lit и выражения элементов. Новые для Lit 2 (и большинство примеров все еще находятся в лабораториях) выражения элементов позволяют настраивать несколько атрибутов, свойств и событий в одной директиве. Это будет выглядеть примерно так:

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

Действительно хорошим примером возможного поведения является анимация переворачивания.