时间戳

首页 > 解决方案 > 如何添加自定义属性，如隐藏

javascript - 如何添加自定义属性，如隐藏

问题描述

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

<ctl-button></ctl-button>

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

例如。

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

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

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

标签： javascripthtmlcss

解决方案

假设您知道这永远不会是有效的 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>

推荐阅读