Как разделить веб-компоненты на отдельные файлы и загрузить их? - PullRequest
Новая
       41

Как разделить веб-компоненты на отдельные файлы и загрузить их?

2 голосов
/ 09 марта 2019

У меня есть веб-компонент x-counter, который находится в одном файле. 

const template = document.createElement('template');
template.innerHTML = `
  <style>
    button, p {
      display: inline-block;
    }
  </style>
  <button aria-label="decrement">-</button>
    <p>0</p>
  <button aria-label="increment">+</button>
`;

class XCounter extends HTMLElement {
  set value(value) {
    this._value = value;
    this.valueElement.innerText = this._value;
  }

  get value() {
    return this._value;
  }

  constructor() {
    super();
    this._value = 0;

    this.root = this.attachShadow({ mode: 'open' });
    this.root.appendChild(template.content.cloneNode(true));

    this.valueElement = this.root.querySelector('p');
    this.incrementButton = this.root.querySelectorAll('button')[1];
    this.decrementButton = this.root.querySelectorAll('button')[0];

    this.incrementButton
      .addEventListener('click', (e) => this.value++);

    this.decrementButton
      .addEventListener('click', (e) => this.value--);
  }
}

customElements.define('x-counter', XCounter);

Здесь шаблон определяется как использование JavaScript, а HTML-содержимое добавляется в виде встроенной строки.Есть ли способ отделить шаблон от файла x-counter.html, скажем, CSS, x-counter.css и соответствующего кода JavaScript для xcounter.js и загрузить их в index.html?

Каждый пример, который я ищу, имеет веб-компонентысмешанные.Я хотел бы разделить проблемы, но я не уверен, как это сделать с компонентами.Не могли бы вы предоставить пример кода?Благодаря.

1 Ответ

2 голосов
/ 09 марта 2019

В основном файле используйте <script> для загрузки файла Javascript x-counter.js.

В файле Javascript используйте fetch() для загрузки HTML-кода x-counter.html.

В файле HTML используйте <link rel="stylesheet"> для загрузки файла CSS x-counter.css.

Файл CSS: x-counter.css 

button, p {
    display: inline-block;
    color: dodgerblue;
}

HTML-файл: x-counter.html

<link rel="stylesheet" href="x-counter.css">
<button aria-label="decrement">-</button>
    <p>0</p>
<button aria-label="increment">+</button>

Файл Javascript: x-counter.js

fetch( "x-counter.html" )
    .then( stream => stream.text() )
    .then( text => define( text ) )

function define( html ) 
{
    class XCounter extends HTMLElement {
        set value(value) {
            this._value = value;
            this.valueElement.innerText = this._value;
        }

        get value() {
            return this._value;
        }

    constructor() {
        super();
        this._value = 0;

        var shadow = this.attachShadow({ mode: 'open' });
        shadow.innerHTML = html;

        this.valueElement = shadow.querySelector('p');
        var incrementButton = shadow.querySelectorAll('button')[1];
        var decrementButton = shadow.querySelectorAll('button')[0];

        incrementButton.onclick =  () => this.value++;       
        decrementButton.onclick = () => this.value--;
    }
    customElements.define('x-counter', XCounter); 
}

Основной файл: index.html

<html>
<head>
    <script src="x-counter.js"></script>
<body>
    <x-counter></x-counter>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...