Создание простого веб-компонента, который вводит строку HTML и запускает функцию JS

#javascript #web-component #native-web-component

Вопрос:

Я хотел бы создать веб-компонент, который просто позволяет мне запускать простую функцию JavaScript. т. е. он будет функционировать, два следующих кода будут действовать одинаково:

 <body>
   <div id="sample"></div>
   <script> createSample(); </script> 
</body>

 <body>
   <my-web-component></my-web-component>
</body>

Я пробовал читать некоторые онлайн-руководства по созданию веб-компонентов, но я относительно новичок в работе с JavaScript в практических и веб-средах в целом, поэтому это в основном не укладывалось у меня в голове. Есть ли какой-нибудь простой способ сделать то, что я описал? Спасибо вам за помощь!

Ответ №1:

Вы почти на месте, чтобы расширить вашу реализацию, мы можем использовать базовый Javascript для создания пользовательских HTML-компонентов с использованием интерфейса HTMLElement. Кроме того, ознакомьтесь со спецификацией жизненного стандарта HTML для получения дополнительных примеров и реализаций.

В качестве примера мы можем сначала определить новый пользовательский компонент и его функциональность в Javascript (это можно сделать в теге в вашем HTML или в отдельном внешнем файле js).

 class MyComponent extends HTMLElement {
    connectedCallback() {
      this.innerHTML = `<h1>Hello world</h1>`;
    }
  }
  
  customElements.define('my-web-component', MyComponent);

 <body>
   <my-web-component></my-web-component>
</body>

И, наконец, определите компонент в своем HTML-файле, не забудьте включить файл js, если вы используете внешний файл для размещения фрагмента Javascript. Когда фрагмент Javascript выполняется при загрузке страницы, он создает пользовательский компонент и отображает его на странице.