gpt4 book ai didi

javascript - Slots 不适用于没有 shadow dom 的 html Web 组件

转载 作者:行者123 更新时间:2023-12-05 00:37:21 24 4
gpt4 key购买 nike

我有一个没有影子 dom 的 html Web 组件,我尝试添加一个插槽。由于某种原因,它不起作用。
我希望它将“Foo bar”切换为“Hello world”,但这并没有发生。

  • 插槽是否仅适用于影子 dom 和模板?
  • 我怎样才能让它工作?

  • class HelloWorld extends HTMLElement {
    constructor() {
    super();
    }

    connectedCallback() {
    this.innerHTML = `
    <div>
    <slot name="element-name">Foo Bar</slot>
    </div>
    `;
    }
    }

    customElements.define("hello-world", HelloWorld);
    <hello-world>
    <span slot="element-name">Hello World</span>
    </hello-world>

    最佳答案

    是的,<slot>仅适用于 shadowDOM
    插槽内容为 反射(reflect) lightDOM 内容
    见:::slotted CSS selector for nested children in shadowDOM slot
    一个 Web 组件 没有 shadowDOM 只有 内部HTML
    如果你这样做 this.innerHTML=在这样的 Web 组件上它 替换 innerHTML ,就像在任何其他 HTML 标记上一样
    使用 shadowDOM:

    <hello-world>
    <b slot="none">Mighty</b>
    <span slot="title">Web Components</span>
    Hello!
    </hello-world>

    <script>
    customElements.define("hello-world", class extends HTMLElement {
    constructor() {
    super()
    .attachShadow({mode:"open"})
    .innerHTML = `<div><slot></slot><slot name="title">Foo Bar</slot></div>`;
    this.onclick = (evt) => {
    this.querySelector('b').slot="title";
    };
    }
    });
    </script>

    关于javascript - Slots 不适用于没有 shadow dom 的 html Web 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67332635/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com