Почему атрибут `is` работает только с веб-компонентами, которые переопределяют встроенный элемент?

Question

Атрибут is="" - это способ благословить встроенный элемент дополнительными интеллектуальными возможностями от пользовательского элемента, но он работает только в том случае, если реализация JS вашего пользовательского элемента расширяет встроенный элемент, на котором вы его используете.

Мне кажется, было бы очень полезно определить дополнительные функции в качестве пользовательского элемента, а затем применить его к любому встроенному элементу.Это позволило бы пользователям веб-компонентов получать выгоду от улучшенного поведения при сохранении значения стандартных семантических элементов.

В чем причина этого ограничения?

Похоже, что Firefox допускает is=""обновить встроенные элементы (https://codepen.io/bdhowe/pen/QRLrWQ?editors=1010),, но другие браузеры, которые я пробовал, этого не делают, а документы MDN говорят, что его можно использовать только в том случае, если пользовательский элемент "расширяет тип элемента.применяется к ".

class MyElement extends HTMLElement {
  constructor() {
    super();
    var shadow = this.attachShadow({mode: 'open'});
    const span = document.createElement('span');
    span.textContent = "Hello, world!";
    shadow.appendChild(span);
  }
}

customElements.define('my-elem', MyElement);

/* I want this to render "Hello, world!" twice. */
<div is="my-elem"></div>
<my-elem></my-elem>

Ссылка:

• https://developers.google.com/web/fundamentals/web-components/customelements#extendhtml
• https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is

Answer 1

Существует два способа использования определения пользовательского элемента, и вы наблюдаете разницу между ними.

---

Если вы хотите использовать пользовательский элемент в качестве своего собственного элемента,например

<my-elem></my-elem>

Тогда вам нужно использовать extends HTMLElement.Это то, что в настоящее время приводит к «Hello, World!»для вашего примера.

---

Если вы хотите, чтобы пользовательский элемент использовался с is = "", например

<div is="my-elem"></div>

, тогда вам также нужно использовать extends HTMLDivElementкак указано в определении customElements.define('my-elem', MyElement, {extends: 'div'});

---

Это два разных подхода к использованию, которые не смешиваются.Я бы предположил, что причина, по которой они не могут смешиваться, связана с тем, что наличие обеих работ потребует множественного наследования, а это не поддерживается.

Возможно, что-то можно взломать вместе, хотя это может показаться довольно неприглядным.Лучше всего использовать один или другой.

Answer 2

Вы можете переопределить (не встроенный) пользовательский элемент, расширив его класс определения.

class Base extends HTMLElement {}
customElements.define( 'base-element', Base )

class BaseExtension extends Base {}
customElements.define( 'extended-element', BaseExtension )