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

Question

我有 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/>s 并在属性中设置其属性，如下所示： <extended-element val="OK" name="first"></extended-element> 从 ExtendedElement 类中访问这些属性的值，并对该值执行与在 NewElement 类中相同的操作。我将如何在 ExtendedElement 中编写 getter/setter，或者我能否以某种方式使用来自 NewElement 的相同的 getter/setter？在这种情况下是否需要 getter 和 setter？

Answer 1

父类中定义的getter和setter将被继承到子类。所以NewElement 中定义的public get Val() 将可用于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>