Tuesday, 3 October 2023

Passing values to constructor of custom HTMLElement

I have a custom HTMLElement that's working as intended, but I cannot find a way to pass arguments to the constructor; instead I'm accessing passing the values in my custom tag, but then I have to set the values in connectedCallback(), which I'm not satisfied with.

Here's a basic version of what I'm doing now:

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;
  }
}

I'd rather pass the videoId directly to the constructor, something like this (which is NOT working):

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 Script on HTML Page:

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

Is there a way to pass values to a custom constructor? The docs imply it is possible but aren't very helpful for how to do it.



from Passing values to constructor of custom HTMLElement

No comments:

Post a Comment