Почему я не могу использовать свой установщик для пользовательского элемента в чистом JS с шаблоном? - PullRequest
Новая
       5

Почему я не могу использовать свой установщик для пользовательского элемента в чистом JS с шаблоном?

1 голос
/ 11 февраля 2020

Я довольно новичок в веб-компонентах и ​​пытаюсь понять, как все это работает. Выполняя рекомендуемый процесс создания шаблона, затем клонируя его в мои shadowRoot, я вижу их в моих chrome элементах, но не на самой веб-странице.

Например: 

import './components/ingredients/ingredients-table';

const template = document.createElement('template');
template.innerHTML = `
    <h3>Add some ingredients</h3>
    <ingredients-table id="hehe"></ingredients-table>

`

class App extends HTMLElement {
    constructor() {
        super();
        this._shadowRoot = this.attachShadow({ mode: 'open' });
        this._shadowRoot.appendChild(template.content.cloneNode(true));
    }

    connectedCallback() {
        console.log(this._shadowRoot.querySelector('ingredients-table').id)
        this._shadowRoot.querySelector('ingredients-table').ingredients = [
            "1 tbsp, cinnamon extract",
            "2 tbsp, cinnamon extract",
            "3 tbsp, cinnamon extract",
            "4 tbsp, cinnamon extract",
            "5 tbsp, cinnamon extract",
            "6 tbsp, cinnamon extract",
        ];
    }
}

window.customElements.define('main-app', App);

window.addEventListener('load', () => {
    const main = document.querySelector('main');
    const app = document.createElement('main-app');
    main.appendChild(app);

});

Это показывает это , что, в свою очередь, означает, что функция set <ingredients-table> не работает

Но когда я изменяю строку конструктора this._shadowRoot.appendChild(template.content.cloneNode(true)); на 

this._shadowRoot.innerHTML = `
    <h3>Add some ingredients</h3>
    <ingredients-table id="hehe"></ingredients-table>
`

Я получаю это

Может кто-нибудь объяснить, как именно это работает? Спасибо

Вот кодекс: https://codepen.io/aishmitkhurana/pen/wvaKWBL?editors=0010

1 Ответ

0 голосов
/ 11 февраля 2020

Ваша ошибка (простая) опечатка

После копания в вашем CodePen
https://codepen.io/aishmitkhurana/pen/wvaKWBL?editors=0010

ваш код: 

const template = document.createElement('template');
template.innerHTML =  `
    <h3>Add some ingredients</h3>
    <ingredients-table></ingredients-table>
    <recipe-steps></recipe-steps>`

...more code...

const template2 = document.createElement('template');
template  <--TYPO    .innerHTML = `
    <table>
        <ingredients-list></ingredients-list>
        <tr>
            <input
                id="ingredients-input"
                placeholder="e.g. 3/4 tbsp cinnamon powder"
            >
        </tr>
    </table>`

Вы назначаете секунду HTML на первый шаблон

Ваша F12 Dev Console четко говорит :

для строки: 

this._shadowRoot.querySelector('ingredients-table').ingredients =

, потому что нет элемент в EMPTY template2

...