如何在不在 LitElements 中渲染的情况下将内部内容作为变量获取

Question

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

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

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

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

效果很好。现在我想要内部内容，即我的 lit 元素 class 中的“MyHeading”作为值（不渲染）。有什么方法可以获取 innerHTML 或作为文本吗？

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

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

是否可以获取内部内容作为一个值？

Answer 1

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

您的自定义元素的子元素尚不可用
当 connectedCallback 触发时

所以你等到 EventLoop 为空（因此知道所有子项都已解析）
或者使用任何（通常）触发甚至晚于 setTimeout
的库方法
或者，更直截了当，如许多博客所示，执行创建元素的脚本
在整个 DOM 被解析后 将其标记为 type="module" 或 async 或 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>

如何在不在 LitElements 中渲染的情况下将内部内容作为变量获取

How to get inner content as a variable without rendering in LitElements

html

web-component

typescript

lit-element

lit