javascript - 为自定义 HTML 元素创建高度和宽度属性

Question

我正在创建自定义 html 标签/元素，然后通过 JavaScript/jQuery 动态添加这些标签/元素。我的最终目标是创建一个自定义元素，如 <xt-vertical-layout height="30px" width="50px"></xt-vertical-layout>其中高度和宽度将设置渲染的大小。我已经弄清楚如何创建自定义元素并具有可以保存数据的自定义属性，但我似乎找不到修改渲染的方法。需要明确的是，我没有遇到 CSS 高度和宽度不起作用的问题。我的问题是，我可能有数百个大小各异的元素，这些元素在文档加载后注入(inject) DOM 之前都是未知的。

我首先研究了带有属性选择器的 CSS，但它似乎无法将属性的值带入 CSS 规则中。同样，我调查了 attr() CSS 的功能，但似乎这只适用于 content 。我发现了一些关于 CSS4 中所有属性都允许使用此功能的文档，尽管我随后读到了一些内容，说 CSS4 将不会发布，而是 CSS 将开始按模块进行更新，因此看来这尚未纳入当前标准.

任何可以阐明此主题的信息将不胜感激。我觉得有某种方法可以做到这一点，但不太确定如何做。但要明确的是，我不想要像使用 JavaScript/jQuery 解析标记并使用 $().css() 修改该元素之类的东西。或类似的东西，因为这会修改实际的标记。我的愿望是保持标记不变，属性修改渲染，类似于<img/>标签有效。

编辑: 如果可以在不修改内联 style 的情况下完成此操作，我不介意在自定义元素的构造函数中使用 JS/jQuery 来完成此操作。属性，保持标记不变。

Answer 1

您通常会在 CustomElement 类 connectedCallback 中处理此问题，您将能够通过 this 访问该节点，以及它的 DOM 方法，例如 getAttribute()(如果它继承自 HTMLElement)。

class VerticalLayout extends HTMLElement {
  constructor() {
    super();
  }
  connectedCallback() {
    this.style.width = this.getAttribute('width');
    this.style.height = this.getAttribute('height');
  }
}
customElements.define('xt-vertical-layout', VerticalLayout);

// dynamically inserted
const elem = document.createElement('xt-vertical-layout');
elem.setAttribute('width', '25px');
elem.setAttribute('height', '25px');
document.body.append(elem);

xt-vertical-layout {
  border: 1px solid;
  display: inline-block;
}

<xt-vertical-layout height="30px" width="50px"></xt-vertical-layout>

<xt-vertical-layout height="50px" width="150px"></xt-vertical-layout>

<xt-vertical-layout height="10px" width="50px"></xt-vertical-layout>

如果您确实不想修改序列化的 DOM，那么您可以在元素的 ShadowDOM 内附加一个样式表，并在那里设置规则。但请注意，这样做，您将失去对旧版浏览器的支持，因为此功能无法进行填充。

class VerticalLayout extends HTMLElement {
  constructor() {
    super();
  }
  connectedCallback() {
    const shadow = this.attachShadow({mode: 'open'});
    const style = document.createElement('style');
    style.textContent = `:host {
  width: ${ this.getAttribute('width') };
  height: ${ this.getAttribute('height') };
}`;
    shadow.append(style);
  }
}
customElements.define('xt-vertical-layout', VerticalLayout);

// dynamically inserted
const elem = document.createElement('xt-vertical-layout');
elem.setAttribute('width', '25px');
elem.setAttribute('height', '25px');
container.append(elem);

console.log(container.innerHTML);

xt-vertical-layout {
  border: 1px solid;
  display: inline-block;
}

.as-console-wrapper {max-height: 120px !important;}

<div id="container">
<xt-vertical-layout height="30px" width="50px"></xt-vertical-layout>

<xt-vertical-layout height="50px" width="150px"></xt-vertical-layout>

<xt-vertical-layout height="10px" width="50px"></xt-vertical-layout>
  
</div>