设置自定义 HTML 元素的样式

Question

我创建了一个普通的自定义元素：

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

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

例如：

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

Answer 1

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

\n\n

通过 it\xe2\x80\x99s 标签名称设置自定义元素的样式也绝对没问题，至少当您在页面上只有这种类型的元素时（或者您想对所有元素应用相同的样式。）

\n\n

除非您想让用户能够设置阴影 DOM 的样式（实际上这是可能的，但无意这样做），请随意以与处理标准元素相同的方式处理自定义元素。

\n