Пользовательские элементы работают для Safari, но не для Firefox и Chrome - PullRequest
Новая
       16

Пользовательские элементы работают для Safari, но не для Firefox и Chrome

0 голосов
/ 12 января 2019

Я уверен, что упускаю что-то фундаментальное из спецификации, но после создания большого набора пользовательских элементов на Mac, работающих в Safari, я обнаружил, что они не работают в Firefox и Chrome. Чего мне не хватает? 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>NoCE</title>
        <script>
            class NoCE extends HTMLElement {
                constructor(args) {
                    super();
                }

                connectedCallback() {
                    this.innerHTML = "<p>It Works</p>";
                }

                attributeChangedCallback(name, oldValue, newValue, namespaceURI) {}

                disconnectedCallback() {}

                adoptedCallback() {}

                static get observedAttributes() { return []; }
            }

            customElements.define("no-ce", NoCE, { extends: "div" });
        </script>
    </head>
    <body>
        <no-ce>
            No custom elements
        </no-ce>
    </body>
</html>

В Safari на странице отображается «Это работает». В Firefox и Chrome отображается «Нет пользовательских элементов» (работает в Mac OS X.)

Safari 12.0.2 Firefox 64.0.2 Хром 71.0.3578.98

1 Ответ

0 голосов
/ 12 января 2019

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

Для Автономный пользовательский элемент : 

class NoCE extends HTMLElement
...
customElements.define( 'no-ce', NoCE )
...
<no-ce><no-ce>

Для Настроенный встроенный <div> Элемент : 

class NoCE extends HTMLDivElement
...
customElements.define( 'no-ce', NoCE, { extends: 'div'} )
...
<div is='no-ce'></div>

Safari не реализует настроенные элементы buit-it и поэтому игнорирует параметр extends и обрабатывает ваш код как простой автономный настраиваемый элемент.

С другой стороны, Chrome и Firefox будут игнорировать ваше пользовательское определение элемента, поскольку оно неверно.

Если вы хотите, чтобы ваш пользовательский элемент наследовал от <div>, вы должны сначала расширить класс NoCE на HTMLDivElement, а затем использовать синтаксис <div is="no-ce">. (Но это не сработает в Safari без полизаполнения.)

В качестве альтернативы, если вы хотите создать свой собственный тег HTML с базовым поведением <div>, вы можете определить автономный пользовательский элемент и применить к нему стиль {display:block} CSS. 

class ACE extends HTMLElement {
  connectedCallback() {
    this.attachShadow( { mode: 'open' } )
        .innerHTML = `<style> :host { display: block } </style>
                      Autonomous CE works`
  }
}
customElements.define( 'a-ce', ACE )


class CBE extends HTMLDivElement {
  connectedCallback() {
    this.attachShadow( { mode: 'open' } )
        .innerHTML = `Customized DIV works`
  }
}
customElements.define("c-ce", CBE, { extends: "div" } )
<a-ce>autonomous custom element not implemented</a-ce>

<div is="c-ce">customized built-in element not implemented</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...