在 HTML5 中使用自定义元素是不好的做法吗？ [复制]

Question

使用document.getElementByTagName 之类的东西，您实际上可以创建自己的元素。

<arial>Hello</arial>

然后在 JS..

var a = document.getElementsByTagName("arial");

for(i = 0; i < a.length; ++i)
     a[i].style.fontFamily = "Arial"

我们有一个自定义元素，很简单。

我的问题归结为，这是不好的做法吗？有什么我没有注意到的缺点吗？

Answer 1

通常，您希望使用标准的 html 元素并使用它们的 ID 或类来定位它们。它将生成更清洁和可用的代码。

Answer 2

这样做的主要缺点是它在语义上无效。但是，浏览器会将其解析为块元素，直到您为其添加更多样式为止。

不要制作自己的标签，而是使用class，也许还有data 属性来为你的DOM添加适当的属性。

Answer 3

我不会说这是不好的做法，但它几乎在任何情况下都过大了，它会使您的 HTML 标记根据W3 Validator 无效。你可以做的是给你的元素一个class，然后在JavaScript中使用getElementByClass引用它：

// Grabs the first element with said class
var foo = document.getElementsByClassName()[0];

Answer 4

The W3C says you should not. 这是不好的做法。

作者不得使用以下元素、属性或属性值 本规范或其他适用的不允许 规范，因为这样做会使 将来要扩展的语言。

此外，HTML5 不是 XML。您应该只使用官方规范中列出的元素。

Answer 5

前向兼容性

正如 cmets 中所述，创建这样的元素是不安全的。例如，假设输入元素不存在，但后来创建。

<input>Some Content</input>

浏览器将其重写为（为清楚起见，XHTML）：

<input />Some Content

SEO 和可访问性

HTML5 页面提供了描述内容的元素。这有助于搜索引擎了解您的页面。如果他们不理解您的页面，可能会降低您的排名。

如果您坚持使用这些标签，并且将它们用于不止一个文本块，您应该给它们roles 和aria-tags。这有助于搜索引擎和需要屏幕阅读器或其他无障碍服务的人。

样式性

在您以编程方式创建元素之前，某些浏览器不会让 CSS 样式生效。 html5shiv 使用相同的技术让旧浏览器支持新的 HTML5 元素。

document.createElement("arial"); // don't need to do anything with it

替代浏览器：data-*

demo

您可以使用data-something 属性来标记元素以进行替换。例如：

<span data-large>Large Text</span>

然后，您可以使用重写器将它们替换为不同的 HTML。本示例使用 jQuery 和一种极其简单的模板语言。

rewrites = {
    large: '<span style="font-size: 2em">{}</span>'
};

function rewrite(r) {
    for (rule in r) {
        // build a selector in the form of [data-something]
        var selector = "[data-{}]".replace("{}", rule)
        $(selector).each(function (i, el) {

            // get our inner html and inject it into our template
            var inner = $(this).html();
            var templated = r[rule].replace("{}", inner);

            // replace the element with our new HTML
            $(this).replaceWith(templated);            

        });
    }
}

rewrite(rewrites);

服务器端/构建

您可以使用您喜欢的任何标签编写代码，但在它到达您的浏览器之前在服务器上对其进行转换。这是一个用 jQuery（客户端）编写的 demo，但与 Cheerio（nodejs）兼容。

rewrites = {
    large: '<span style="font-size: 2em">{}</span>'
};

function rewrite($, r) {
    for (rule in r) {
        $(rule).each(function (i, el) {
            var inner = $(this).html();
            var templated = r[rule].replace("{}", inner);
            $(this).replaceWith(templated);            
        });
    }
}

rewrite($, rules)

这既可以作为构建脚本，也可以作为一个非常简单的服务器端模板。这样，浏览器和搜索引擎就永远不会看到我们组成的元素。如果您需要这些虚拟元素，我推荐此解决方案。