css - 样式化自定义 HTML 元素

Question

我创建了一个香草自定义元素：

document.registerElement("my-el", { prototype: Object.create(HTMLElement.prototype) });

该元素使用 Shadow DOM 和其中的<style>标签。但是，我想让用户在主样式表中定义自定义元素的大小。它通过引用自定义标签来工作，但这是推荐的方法吗？

例如：

my-el {
  width: 300px;
  height: 50px;
  background: green;
}

score 4 · Accepted Answer

id并且class是的属性。HTMLElement因此，当您使用HTMLElementor 后代作为自定义元素的原型时，您可以自由地应用class[es] 和/或id它。

通过它的标签名称来设置自定义元素的样式也绝对可以，至少当页面上只有这种类型的元素时（或者你想对所有元素应用相同的样式。）

除非您想让您的用户能够设置阴影 DOM 的样式（这实际上是可能的，但并不打算这样做），否则您可以像处理标准元素一样随意处理自定义元素。

1 回答 1