1

我正在像这样使用我的发光元素

<my-header>MyHeading</my-header>

我有我的 lit 元素的渲染方法：

render() {
  return html`
    <h3><slot></slot></h3>
  `;
}

这是完美的工作。现在，我希望将 lit 元素类中的内部内容（即“MyHeading”）作为一个值（不渲染）。有什么方法可以获取该 innerHTML 或作为文本？

注意：我的用例可以是设置渲染内容的另一个属性，例如

render() {
  return html`
    <h3 id="${//How to get that 'MyHeading' here??}"><slot></slot></h3>
  `;
}

是否有可能获得内部内容作为价值？

4

1 回答 1

1

这就是你从库或框架开始学习新东西时所得到的；
你学习的是工具，而不是技术。

触发 时，您的 customElement 的子元素尚不可用
connectedCallback

  • 所以你等到 EventLoop 是空的（因此知道所有的孩子都被解析了）

  • 或者使用任何（通常）触发甚至晚于setTimeout

  • 或者，更直截了当，就像许多博客显示的那样，
    在整个 DOM 被解析后执行创建元素的脚本，方法是将其标记为type="module"orasync或defer

<script>
  customElements.define("my-element", class extends HTMLElement {
    constructor(){
        super().attachShadow({mode:"open"}).innerHTML = `<h3><slot></slot></h3>`
    }
    connectedCallback() {
      setTimeout(() => { // wait till innerHTML is parsed
        let title = this.innerText;
        console.log("Reflected from lightDOM:" , title);
        this.shadowRoot.querySelector("h3").id = title;
      })
    }
  })
</script>

<my-element>
  Hello Web Components!
</my-element>

于 2021-08-21T08:43:12.277 回答