如何从使用 shadow DOM 的类访问/设置继承的属性？

如何解决如何从使用 shadow DOM 的类访问/设置继承的属性？

我有 2 个打字稿类，一个扩展 HTMLElement，一个扩展该类。这两个都是指我在整个项目中使用的自定义 HTML 元素。我对这里的继承有些困惑。

export class NewElement extends HTMLElement { //custom element is new-element
   constructor(){
      super();
      this.attachShadow({ mode: "open" });
      this.shadowRoot.innerHTML = html; //imported from an external html file,just a div
   }

   public get Val() { return this.val; } 
   public set Val(value) { //setter with callback } 
   private val = "";
 
   public get Name() {return this.name; } 
   public set Name(value) { //setter with callback} 
   private name = "";
 
   ...
}

export class ExtendedElement extends NewElement { //custom element is extended-element
   constructor(//does something get passed in here?) {
      super(//or here?);

      /// ???
   }
}

我希望能够向 DOM 添加一系列 <extended-element/> 并在如下属性中设置其属性： <extended-element val="OK" name="first"></extended-element> 从 ExtendedElement 类中访问这些属性的值，并对该值执行与在 NewElement 类中相同的操作。我将如何在 ExtendedElement 中编写 getter/setter，或者我可以以某种方式使用 NewElement 中的相同的 getter/setter？在这种情况下，getter 和 setter 都需要吗？

解决方法

父类中定义的getter和setter会被继承到子类中。因此，public get Val() 中定义的 NewElement 将可用于 ExtendedElement。

不过，我会改变您使用它们的方式。目前他们只获取和设置一个私有值，之间没有任何处理，使其行为与仅分配和读取属性值相同。

而是使用它们来获取和设置元素的属性值。这有点类似于 href getter 和 setter 在 <a> 标签上的行为，使您的自定义元素表现得像本机元素一样，在我看来，这是理想的行为。

我添加了继承的 JavaScript 实现以及 getter 和 setter 的用法。

class NewElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML = '';
  }

  get name() {
    return this.getAttribute('name');
  }

  set name(value) {
    this.setAttribute('name',value);
  }

  get val() {
    return this.getAttribute('val');
  }

  set val(value) {
    this.setAttribute('val',value);
  }
}

class ExtendedElement extends NewElement {
  constructor() {
    super();
  }
  
  /**
   * This is a lifecycle hook and will be called
   * whenever the custom element is added to the page,* like when loading the page.
   * @link https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks
   */
  connectedCallback() {
    console.log(this.name,this.val);
  }
}

customElements.define('extended-element',ExtendedElement);

<extended-element val="OK" name="first"></extended-element>