Передача значений в конструктор пользовательского 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() {
  }
}

JS-скрипт на HTML-странице:

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

Есть ли способ передать значения в пользовательский конструктор? Документы подразумевают, что это возможно, но не очень полезно для того, как это сделать.

Answer 1

Вы можете сделать это с помощью ключевого слова new:

const tacking_preview = new TrackingPreview( id )