时间戳

首页 > 解决方案 > 将值传递给自定义 HTMLElement 的构造函数

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

问题描述

我有一个按预期工作的自定义 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);
  });

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

标签： javascripthtmldjangocustom-element

解决方案

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属性。

推荐阅读