我能否使用自定义元素和属性作为有效的HTML？

Question

我能否使用自定义元素和属性作为有效的HTML？

4

我可以在IE 9上使用自定义元素和自定义属性吗？使用这个CSS是有效的吗？有什么缺点吗？

我希望能够拥有更易读的代码...而不需要使用div。

HTML

<row center>
  <column number="6">A</column>
</row>

CSS / LESS

row {
  background: #444;
  display: flex;

  &[center] {
    justify-content: center;
  }

  column {
    background: #222;
    color: #fff;

    &[number="6"] {
      padding: 1rem;
      width: 50%;
    }
  }
}

- Altaula

我认为没有什么主要的负面影响。使用自定义元素的目的是什么？ - Sachin

1

负面影响是，一些浏览器可能无法识别它们，导致行为不可预测。更好的问题是：“相比于传统元素，使用它们的最重要理由是什么？” - Paulie_D

如果你没有使用库或框架，就无法编写自定义元素。例如，可以查看 https://angularjs.org/ 的 Angular 框架，它通过使用指令来支持自定义元素。 - Nike Sprite

你的DOCTYPE声明是什么？你在意编写有效的代码吗？ - jeffjenx

在这种情况下，您可能应该使用“表格”。 - Yukulélé

显示剩余4条评论

3个回答

1

制作自己的标记语言：

可能会与将来添加到HTML中的其他功能产生冲突（至少如果您告诉浏览器它是带有Content-Type：text / html HTTP标头的HTML）。
无法被那些您无法完全使用CSS覆盖的用户代理（如屏幕阅读器、文本浏览器和搜索引擎）正确理解。
其他开发人员在未来可能需要维护您的代码时无法理解。
无法使用HTML验证器进行简单的QA检查。

- Quentin

1

W3C正在开发一种名为 自定义元素 的标准，允许作者定义自己的元素。您可以在此处阅读相关信息：

自定义元素，在HTML中定义新元素
自定义元素允许Web开发人员定义新类型的HTML元素。该规范是Web组件下的几个新API原语之一，但它很可能是最重要的一个。没有自定义元素解锁的功能，就不存在Web组件：
- 定义新的HTML/DOM元素
- 创建从其他元素扩展的元素
- 将自定义功能逻辑捆绑到单个标记中
- 扩展现有DOM元素的API
自定义元素入门

自定义元素使开发人员可以创建自己的自定义HTML标记，并让他们在其站点和应用程序中使用这些标记，从而实现更轻松的组件重用。
W3C自定义元素

为Web开发人员提供了一种构建完全功能的DOM元素的方法。尽管在HTML中长期以来就可以使用任何标记名称创建DOM元素，但这些元素并不是非常实用。通过为Web开发人员提供通知解析器如何正确构造元素并对元素的生命周期变化做出反应的手段，该规范消除了DOM作为呈现视图脚手架的需要，这在大多数Web框架或库中今天仍然存在。

然而，如果你今天的目标是编写更易读的代码，那么考虑使用标准的HTML元素（或只使用

和元素），并使用class和id值进行描述。您可以根据需要使用类和ID进行描述。有关指导，请参见此处的我的答案：

- Michael Benjamin

重要提示：来自该规范的作为编辑草案的发布并不意味着W3C成员对其进行认可。 - Quentin

从规范中可以得出另一个重要的提示：开发人员必须使用ARIA角色、状态和属性来传达语义(这可能会破坏作者简化标记的目标)。 - Quentin

1

@quentin，自定义元素（我相信你已经知道）是HTML5 Web组件的一部分，这是由W3C、Google和其他大公司积极追求和开发的。目标是使其对所有人都可用，因此我不确定你所说的破坏作者简单目标的描述是否正确。我认为它将来会很容易访问。 - Michael Benjamin

1

@Quentin，是的，我知道规范的状态。这行与你引用的内容类似：这是编辑草案的公共副本。仅供讨论，可能随时更改。在此发布并不意味着W3C对其内容的认可。除了作为正在进行的工作之外，请勿引用此文档。 ～来自flexbox规范。 - Michael Benjamin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- miken32 · Accepted Answer

反对自定义元素的理由已经在其他答案中提出。作为这个想法的替代方案，HTML 5引入了许多新元素。其中包括<article>、<aside>、<figure>、<header>、<nav>和<section>。使用这些元素应该使您的页面布局在语义上有意义，避免您困惑于一堆<div>和<span>元素，并且能够被现代浏览器理解。