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

标签 javascript custom-element

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

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

对于标准 HTML 元素,约定是使用反射(reflect)到元素的数据集 和从元素的数据集 反射的data-属性。

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

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

不过,对于属性名称来说,这应该是有效的。想象一下 HTML 标准将获得一个新的通用属性,我们抽象地将其称为 attr。当然,这也会反射(reflect)到 HTMLElement 原型(prototype)上的同名属性。

我的问题是:

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

  2. 如果是这样,您将如何实现“ bool ”数据属性(其中属性值无关紧要,状态是通过该属性的不存在/存在来实现的)?

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

如有不明之处,请要求澄清。我试图让问题尽可能简洁。

最佳答案

我不担心我的自定义元素属性或属性是否会成为 HTMLElement 的预定义属性或属性。如果规范发生变化,我会及时处理。但是试图猜测将来可能使用的所有内容是不可能的,也不值得我花时间。

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

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

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

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

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

我什至接管了一个或多个现有的 HTMLElement 属性和特性。这种情况很少见,但有时我需要对该值执行某些操作,或者我只是不希望发生默认操作。 同样,这种情况很少见。

关于javascript - 自定义元素上的属性/属性名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55342835/

相关文章:

javascript - 如何有一个关闭按钮来关闭同位素布局完成上的扩展项目

javascript - 在 AngularJS 表达式中使用 "&&"时,Thymeleaf 解析错误

javascript - 将不同的日期格式转换为 new Date() 然后查看 date1 是否在 date2 和 date3 之间

javascript - 如何扩展自定义元素("vanilla"Web组件,无Polymer)

custom-element - 未捕获( promise )TypeError : Illegal constructor at new SvelteElement (index. mjs:1381)

javascript - 在 `<a>` anchor 标记中存储一些数据的正确方法是什么?

javascript - 子阵选择

javascript - "unnamed"插槽上的后备内容永远不会显示

html - 在 HTML5 中注入(inject)自定义元素,然后使用 XPath 检索其值返回空白