自定义元素上的属性/属性 名称

Attribute / Property names on custom elements

我所在的团队为大客户开发自定义元素库(根据自定义元素规范 v1)。到目前为止,我们已经开发了大约 30 个组件,其中一半是自主自定义元素,另一半是自定义内置组件。

我们目前正处于重构和统一这些组件 API 的阶段。几乎所有这些组件都有自定义属性。

对于标准 HTML 元素,惯例是使用 data- 属性,这些属性反映到元素的 dataset 和从元素的 dataset 反映出来。

我知道自治自定义元素允许自由属性/属性 命名,只要名称不与 HTMLElement 已有的冲突。

据我了解,data- 属性背后的想法是确保没有库会开始实施可能与 HTML 标准的未来版本冲突的自定义属性。

不过,同样适用于 属性 名称。想象一下 HTML 标准将获得一个新的通用属性,让我们抽象地称之为 attr。当然,这也会反映到 HTML 元素原型上的同名 属性。

我的问题是:

  1. 在这里避免未来冲突的建议方法是什么?是否总是只使用 data--attributes 来实现自定义属性,从而通过使用 dataset 而不是直接附加到元素的属性来避免冲突?

  2. 如果是这样,您将如何实现 "boolean" 数据属性(属性值无关紧要,状态是通过该属性的 absence/presence 实现的) ?

  3. 是否可以为元素的 dataset 中的属性定义自己的 getter 和 setter?

如有不明之处请追问。我试着让问题尽可能简洁。

我不担心针对可能成为预定义属性或 HTMLElement 的 属性 的自定义元素属性或属性进行未来验证。如果规范发生变化,那么我会处理它。但是尝试猜测未来可能使用的所有东西是不可能的,也不值得我花时间。

我避免对自定义元素使用 data- 属性。 dataset 值只是字符串,不能很好地转换。例如,如果我这样做:

el.dataset.dog = {woof:10};

然后我的标签得到一个像这样的属性:data-dog="[object Object]" 并且这个 console.log(el.dataset.dog) 显示 "[object Object]"。这违背了许多可能需要处理对象的属性的目的。

我只为必须是属性的东西创建属性。如果我必须允许 HTML 定义默认值,或者如果我需要创建一个 CSS 属性选择器,那么我将创建一个属性。但只有在这两个条件下。

我为我需要的一切创建属性 (getter/setter) 或函数。将任何格式的数据传入属性或函数比将其转换为字符串通过属性传入更容易。

我什至接管了一个或多个现有的 HTML 元素属性。这种情况很少见,但有时我需要对值做一些事情,或者我只是不想默认操作发生。 同样,这很少见。