Polymer 具有Typescript的LitElement，无法访问shadowRoot DOM

我的查询选择器或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">

@customElement（'my-element'））
导出类MyElement扩展了LitElement{
@属性（{type:String}）carousel=document.queryselectoral（“[data target='carousel']”）；
connectedCallback（）：void{
super.connectedCallback（）；
log（this.shadowRoot.querySelector（'slider'）；
log（this.shadowRoot.querySelector（'.slider'）；
log（this.shadowRoot.querySelector（“#slider”）；
log（this.shadowRoot.getElementById（'slider'）；
log（document.getElementById（'slider'）；
}
render（）{
返回html`

请尝试以下操作：

@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')
   }
}

@customElement（'my-element'））
导出类MyElement扩展了LitElement{
获取根（）{
返回此。shadowRoot | |此
}
render（）{
返回html``
}
第一次更新（）{
console.log（this.root.getElementById（'slider'））
}
}

您的组件显示正确吗？您可以发布组件代码的其余部分吗？这看起来像是一个.getElementById（'slider'）文档不起作用，因为元素不是

文档的轻型DOM的成员；它是
我的元素的阴影DOM的成员，这也是
this.shadowRoot.getElementById（'slider'）的原因
确实有效。这是出于设计。您试图解决的实际问题是什么？为什么需要在MyElement之外引用该元素？