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

Question

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

我最初研究了带有属性选择器的 CSS，但它似乎无法将属性的值向下传递到 CSS 规则中。同样，我研究了 CSS 的 attr() 函数，但似乎这只适用于 content。我发现了一些关于 CSS4 中所有属性都允许使用此功能的文档，尽管然后我读到一些内容说 CSS4 将不会被发布，而是 CSS 将开始按模块更新，所以似乎这还没有成为当前标准.

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

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

Answer 1

您通常会在您的 CustomElement 的类 connectedCallback 中处理此问题，在那里您将能够以 this 的身份访问节点，如果它继承自 HTMLElement，则它的 DOM 方法（如 getAttribute()）。

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>

Answer 2

自定义标签将显示内联，不能有宽度和高度。您需要显示块或内联块。

addContent('Here is some content', 200, 50);

function addContent(content, width, height) {
  const elm = document.createElement('xt-vertical-layout');
  elm.setAttribute('style', `width: ${width}px; height: ${height}px;`);
  elm.innerText = content;
  document.body.append(elm);
}

xt-vertical-layout {
  display: inline-block;
  color: white;
  padding: 5px;
  background-color: red;
}