javascript - 将值传递给自定义 HTMLElement 的构造函数

Question

我有一个按预期工作的自定义 HTMLElement，但我找不到将参数传递给构造函数的方法；相反，我正在访问传递自定义标记中的值，但随后我必须在 connectedCallback() 中设置值，我对此并不满意。

这是我现在正在做的事情的基本版本:

class TrackingPreview extends HTMLElement {
  constructor() {
    super();

    const video = document.createElement('video');
    video.setAttribute('controls', '');
    video.setAttribute('width', '1920');
    video.setAttribute('height', '1080');
    shadow.appendChild(video);

    this.video = video;
  }

  connectedCallback() {
    const videoId = this.getAttribute('video-id');
    this.video.id = videoId;
  }
}

我宁愿将 videoId 直接传递给构造函数，像这样(不起作用):

JS:

 class TrackingPreview extends HTMLElement {
  constructor(videoId) {
    super();

    const video = document.createElement('video');
    video.setAttribute('id', videoId);
    video.setAttribute('controls', '');
    video.setAttribute('width', '1920');
    video.setAttribute('height', '1080');
    shadow.appendChild(video);
  }

  connectedCallback() {
  }
}

HTML 页面上的 JS 脚本:

  $(document).ready(function(){
    const tracking_preview = document.createElement('tracking-preview','{{video_id}}');
    tracking_preview.videoId = '{{video_id}}';
    document.body.append(tracking_preview);
  });

有没有办法将值传递给自定义构造函数？文档暗示这是可能的，但对如何去做不是很有帮助。

Answer 1

Web 组件的构造函数规则非常严格。一条规则是不允许将任何参数传递给构造函数。

https://w3c.github.io/webcomponents/spec/custom/#custom-element-conformance

同时使用属性和属性

class TrackingPreview extends HTMLElement {
  static get observedAttributes() {
    return ['videoid'];
  }

  constructor() {
    super();

    const video = document.createElement('video');
    video.setAttribute('controls', '');
    video.width = 192;
    video.height = 108;
    this.video = video;
    this.attachShadow({mode: 'open'}).appendChild(video);
  }

  attributeChangedCallback(attrName, oldVal, newVal) {  
    if (oldVal !== newVal) {
      // Since we only watch videoid there is no need to check attrName
      this.video.setAttribute('id', newVal);
    }
  }
  
  get videoId() {
    return this.video.getAttribute('id');
  }

  set videoId(val) {
    if (val == null) { // check for null and undefined
      this.removeAttribute('videoid');
    }
    else {
      this.setAttribute('videoid', val);
    }
  }
}

customElements.define('tracking-preview', TrackingPreview);

setTimeout(function() {
  let el = document.querySelector('tracking-preview');
  if (el) {
    console.log(el.videoId);
    el.videoId = 99;
    console.log(el.videoId);
  }
}, 500);

<tracking-preview videoid="10"></tracking-preview>

设置 videoid 属性后，将调用 attributeChangedCallback 函数并将该值传递给 video 元素。

在我的超时函数中，我读写了 videoId 属性，后者读写了 videoid 属性。