带有 Typescript 的 LitElement，无法访问 shadowRoot dom答案

【问题标题】：LitElement with Typescript, cannot access shadowRoot doms带有 Typescript 的 LitElement，无法访问 shadowRoot dom
【发布时间】：2020-02-07 04:22:56
【问题描述】：

我的查询选择器或 getElementById 总是返回 null，有人可以解释一下为什么吗？尝试了我能想到的所有方法（并在互联网上找到），但没有任何效果。

@customElement('my-element')
export class MyElement extends LitElement {

@property({type : String}) carousel = document.querySelectorAll("[data-target='carousel']");

connectedCallback(): void {
    super.connectedCallback();

    console.log(this.shadowRoot.querySelector('slider'));
    console.log(this.shadowRoot.querySelector('.slider'));
    console.log(this.shadowRoot.querySelector('#slider'));
    console.log(this.shadowRoot.getElementById('slider'));

    console.log(document.getElementById('slider'));

}

render(){
    return html`
        <div class="slider" id="slider">
            <ul class="carousel" data-target="carousel">

【问题讨论】：

您的组件显示正确吗？你能发布其余的组件代码吗？
这似乎是XY problem。 document.getElementById('slider') 不起作用，因为该元素不是 document 的轻 DOM 的成员；它是my-elements shadow DOM 的成员，这也是this.shadowRoot.getElementById('slider') 确实工作的原因。这是设计使然。您要解决的实际问题是什么？为什么需要在 MyElement 之外引用该元素？

标签： polymer shadow-dom lit-element

【解决方案1】：

请尝试以下方法：

@customElement('my-element')
export class MyElement extends LitElement {

  get root() {
    return this.shadowRoot || this
  }

   render(){
    return html`<div class="slider" id="slider">...`
   }

   firstUpdated() {
    console.log(this.root.getElementById('slider')
   }
}

【讨论】：