Как создать пользовательские элементы, используя веб-компоненты? - PullRequest
Новая
       24

Как создать пользовательские элементы, используя веб-компоненты?

0 голосов
/ 05 июля 2019

Я пытаюсь создать пользовательский элемент ...

Мой первый вариант:

JS: enter image description here

class AwesomeButtonComponent extends HTMLButtonElement {
    constructor() {
        super();

        this.addEventListener('click', () => {
            alert('Great job!');
        });
    }
}

customElements.define('awesome-button', AwesomeButtonComponent, {extends: 'button'});

HTML: <awesome-button>CLICK ME</awesome-button>

Мой второй вариант:

JS: 

customElements.define('awesome-button', Object.create(HTMLButtonElement.prototype), {
       extends: 'button'
    });

HTML: <awesome-button>CLICK ME</awesome-button>

08.07.2019 и <button is="awesome-button">CLICK ME</button>

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

enter image description here

js, vue, html5

1 Ответ

4 голосов
/ 05 июля 2019

Чтобы использовать настраиваемые встроенные элементы, вы должны ссылаться на них по-разному (используя is -атрибут) см. Здесь 

class AwesomeButtonComponent extends HTMLButtonElement {
    constructor() {
        super();

        this.addEventListener('click', () => {
            alert('Great job!');
        });
    }
}

customElements.define('awesome-button', AwesomeButtonComponent, {extends: 'button'});
<!doctype html>
<html>
  <head>
    <title>Custom element</title>
  </head>
  <body>
    <button is="awesome-button">CLICK ME</button>
  </body>
</html>

Имейте в виду, что не все браузеры (по состоянию на 2019-07-08) поддерживают "Настраиваемые встроенные элементы" пока

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

Похожие темы

...