为什么不能在带有模板的纯JS中将setter用于自定义元素？

Question

我对Web组件还很陌生，并且一直在尝试弄清它们是如何工作的。在执行建议的模板创建过程后，将其克隆到我的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);

});

这表明this依次表示<ingredients-table>的设置功能不起作用

但是当我将构造函数行this._shadowRoot.appendChild(template.content.cloneNode(true));更改为]时>

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

有人可以澄清一下它是如何工作的吗？谢谢

我对Web组件还很陌生，并且一直在尝试弄清它们是如何工作的。在执行推荐的模板创建过程后，将其克隆到我的shadowRoot中，我可以看到它们...

Answer 1

显示您的所有代码