自定义元素可以安全地使用任意属性名称吗？

Question

how custom elements should be named 有非常明确的规则。与其他 HTML 元素的主要区别在于它们必须有一个非前导连字符。虽然可以加载包含不符合这些规则的虚构标签名称的 HTML 文档，但它应该保证一定程度的未来验证和平台支持。

但是，我正在寻找有关如何为我的自定义元素命名 属性 的指导。为了可读性和方便，我更喜欢使用简短的描述性属性名称，例如不为所有内容使用data- 前缀，但我也想确保在 HTML5 中添加新功能时事情不会中断。到目前为止，我的研究还没有给出任何明确的答案，并且表明在实践中，这有点像狂野的西部。

例如，W3 HTML5 validator 似乎接受遵循基本约定的虚构属性名称，例如仅使用 a-z 和连字符，但仅当它们用于自定义元素时。它抱怨诸如使用特殊字符或重复相同属性之类的事情，因此这表明它不是简单地完全放弃对自定义元素的验证，而是实际上认为任意属性名称在该上下文中是有效的。

谷歌的开发者资源页面Custom Element Best Practices，但据我所知，它并没有回答这个问题。然而，他们的examples 似乎坚持使用现有的属性名称，如checked 和disabled。然而，来自 Google 的以 Web 组件为中心的 javascript 库 Lit 的示例似乎使用了 arbitrary attribute names。

我的问题归结为：

1. 规范中关于如何为自定义元素命名自定义属性的官方说法是什么？
2. 如果没有官方消息，什么是最佳实践？使用自定义元素的人如何确保其属性不会在未来的浏览器中触发意外功能？

Answer 1

specification 将自定义元素接受的属性定义为：

• 全局属性，除了 is 属性
• form，用于与表单关联的自定义元素 — 将元素与表单元素关联
• disabled，对于表单相关的自定义元素——表单控件是否被禁用
• 只读，用于与表单相关的自定义元素 - 影响 willValidate，以及自定义元素作者添加的任何行为
• name，用于与表单相关的自定义元素 - 用于表单提交和 form.elements API 的元素名称
• 任何其他没有命名空间的属性（参见散文）。

然后说

任何与元素相关的无命名空间属性 可以指定元素作者确定的功能 在自治自定义元素上，只要属性名称是 XML 兼容并且不包含 ASCII 大写字母。例外是 is 属性，不能在自治自定义上指定 元素（如果存在则无效）。

自定义的内置元素遵循正常要求 属性，基于它们扩展的元素。添加自定义 基于属性的行为，使用 data-* 属性。