Зарегистрированный пользовательский элемент не определен - PullRequest
Новая
       4

Зарегистрированный пользовательский элемент не определен

0 голосов
/ 09 ноября 2018

Я решил посмотреть пользовательских элементов , но мне не удается заставить работать ни один из примеров.

Взять например: 

window.customElements.whenDefined('file-bag')
    .then(() => console.log('Registered'))
    .then(() => console.log(window.customElements.get('file-bag')))
    .catch(console.error);
window.customElements.define('file-bag', class extends HTMLElement {
  constructor() {
    super();
    var shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `<strong>Shadow dom super powers for the win!</strong>`;
  }
});
<file-bag></file-bag>

Источник: https://auth0.com/blog/web-components-how-to-craft-your-own-custom-components/

Ожидаемый результат: 

<file-bag>
  <strong>Shadow dom super powers for the win!</strong>
</file-bag>

Но это не работает. Элемент регистрируется, однако customElements.get('file-bag') возвращает undefined. Что мне не хватает?

Я нахожусь на Chrome 70.

Edit:

Похоже, проблема в том, как я загружаю скрипт. Наличие встроенного скрипта работает: 

<script>
    window.customElements.whenDefined('file-bag')
        .then(() => console.log('Registered'))
        .then(() => console.log(window.customElements.get('file-bag')))
        .catch(console.error);
    window.customElements.define('file-bag', class extends HTMLElement {
    constructor() {
        super();
        var shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.innerHTML = `<strong>Shadow dom super powers for the win!</strong>`;
    }
    });
</script>
<file-bag></file-bag>

Но его в отдельном файле нет. 

<script src="./index.js"></script>
<file-bag></file-bag>

1 Ответ

0 голосов
/ 12 ноября 2018

Следует отметить, что вам не нужно использовать window для всех вызовов customElements.

Я изменил ваш код ниже, и он прекрасно работает, как вы сказали. 

customElements.whenDefined('file-bag')
  .then(() => console.log('Registered'))
  .then(() => console.log(customElements.get('file-bag')))
  .catch(console.error);
        
        
customElements.define('file-bag', class extends HTMLElement {
  constructor() {
    super();
    var shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `<strong>Shadow dom super powers for the win!</strong>`;
  }
});
<file-bag></file-bag>

Я также создал два файла, FileBag.js: 

customElements.whenDefined('file-bag')
  .then(() => console.log('Registered'))
  .then(() => console.log(customElements.get('file-bag')))
  .catch(console.error);


customElements.define('file-bag', class extends HTMLElement {
  constructor() {
    super();
    var shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `<strong>Shadow dom super powers for the win!</strong>`;
  }
});

и FileBagExample.html: 

<!doctype html>
<html>
<head>
  <title>Simple Tag</title>
  <script src="FileBag.js"></script>
</head>
<body>
  <file-bag></file-bag>
</body>
</html>

И это прекрасно работает для меня в Chrome 70 и Firefox 63.

Да, Firefox 63 теперь поддерживает веб-компоненты.Мы только ждем на краю.на 100% поддержку.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...