如何添加隐藏的自定义属性

Question

我已经创建了自定义元素window.customElements.define（'ctl-button'，CTLButton）

<ctl-button></ctl-button>

我正在搜索如何添加自定义属性，例如隐藏在HTML标记中的

。

例如。

<ctl-button red dismiss></ctl-button>

红色-将红色添加到背景颜色。

关闭-单击后将隐藏按钮。

Answer 1

假设您知道这将永远不是有效的HTML，也永远不会在实际应用中使用。

要添加样式，您只能像这样使用CSS

ctl-button[red] {
   background-color: red;
}

ctl-button[dismiss] {
   display: none;
}

<ctl-button red dismiss>dismissed</ctl-button>
<ctl-button red >yyyy</ctl-button>