如何添加自定义属性，如隐藏 [重复]

【问题标题】：How to add Custom attribute like Hidden [duplicate]如何添加自定义属性，如隐藏 [重复]
【发布时间】：2020-01-31 11:44:47
【问题描述】：

我已经创建了自定义元素 window.customElements.define('ctl-button',CTLButton)

<ctl-button></ctl-button>

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

例如。

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

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

Dismiss - 单击后将隐藏按钮。

【问题讨论】：

样式元素一应该使用 CSS 和类，而不是发明自己的属性（如果仍然这样做，它们应该加上前缀 data-*）。要隐藏元素，请在单击时切换现有的 hidden 属性

【解决方案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>

【讨论】：

抱歉，我是 Web 开发的新手，我想知道如果我们开始在 HTML 中使用它会产生什么问题？你能告诉我吗？
顺便说一句，感谢分享，我看到这可以使用 CSS 属性选择器来完成。
@Perseus 可能发生的问题是：它会破坏 HTML 的其余部分。看到每个浏览器都尽力使您的 HTML 看起来不错并且可以工作。但是，如果您使用不存在的元素，它可能会因从一个元素到另一个元素的错误距离而阻止其余元素，最坏的情况是您的元素甚至不可见，即使它应该可见。尝试坚持使用很多给定的标签！查看此列表并根据您的需要使用其中之一：developer.mozilla.org/en-US/docs/Web/HTML/Element