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

时间:2019-03-25 16:54:39

标签: javascript custom-element

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

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

对于标准HTML元素,约定是使用data-属性,这些属性在元素的dataset之间来回反映。

我知道以下事实:只要名称不与HTMLElement已有的名称冲突,自治的自定义元素就可以自由命名属性/属性。

据我所知,data-属性背后的想法是确保没有一个库将开始实现可能与HTML标准的未来版本相冲突的自定义属性。

对于属性名称来说,相同的内容应该有效。想象一下,HTML标准将获得一个新的通用属性,让我们抽象地称为 attr 。当然,这也将反映为HTMLElement原型上的同名属性。

我的问题是:

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

  2. 如果是这样,那么您将如何实现“布尔”数据属性(如果属性值无关紧要,则通过缺少该属性来实现状态)?

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

如果不清楚,请要求澄清。我试图使问题尽可能简洁。

1 个答案:

答案 0 :(得分:2)

我不必担心将来可能会变成HTMLElement的预定义属性或属性的情况下对我的自定义元素属性或属性进行过时验证。如果规格发生变化,那么我将处理它。但是,试图猜测将来可能使用的一切都是不可能的,也不值得我花时间。

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

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

然后我的标签的属性为:data-dog="[object Object]",此console.log(el.dataset.dog)显示"[object Object]"。这破坏了可能需要处理对象的许多属性的目的。

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

我为我需要的所有内容创建属性(getter / setter)或函数。将任何格式的数据传递到属性或函数中要容易得多,然后将其转换成字符串以通过属性传递就容易了。

我甚至已经接管了一个或多个现有的HTMLElement属性和属性。这种情况很少见,但是有时我需要对值做一些事情,或者我只是不想执行默认操作。 再次,这很少见。