HTML中的自定义元素[重复]答案

【问题标题】：Custom elements in HTML [duplicate]HTML中的自定义元素[重复]
【发布时间】：2013-10-08 20:34:04
【问题描述】：

我很好奇定义自己的元素并使用 JavaScript 或 JQuery 选择它们是否可靠。

我遇到了"Are custom elements valid HTML5?" 的问题，但我对半生不熟的规范不感兴趣，也对定义我自己的元素的正式方式不感兴趣。

我只是想知道，例如我是否使用

<orange-juice />

在我的文档中并尝试像这样选择它（通过 CSS，通过 jQuery）

orange-juice.fresh

它是否可以跨浏览器工作（当然，它甚至可能受到 HTML5 规范的一部分明确允许的支持？）

编辑：跨浏览器，如 IE9+ 和主要桌面浏览器。

编辑： 也许橙汁的例子有点误导，就像提到 CSS 一样。我不想创建自己的语义元素，也不想真正设置内容样式，我想附加一些元信息，然后由脚本解释。它同样可以是一个带有数据属性的空 div，但我觉得<my-meta-element /> 会比<div id="i-am-just-an-innocent-fill-in-carrying-some-information-which-does-not-have-anything-to-do-with-me-being-a-generic-block-displayed-element"></div> 更好的选择

【问题讨论】：

不这么认为。你为什么要这个？语言和验证器是为了一致性和可重用性而创建的。
定义“跨浏览器”。我知道这在 IE8 中不起作用。
好吧..它可能很容易测试，所以尝试一下，让我们知道！ ;)
看看这个答案stackoverflow.com/a/11467718/603520。简而言之，答案可能是，但正如@f00bar 所说，试一试，让我们知道。不过我不建议这样做。
正如@adeneo 所说，有一种技术可以让你做到这一点，这基本上是通过使用 Javascript 创建它们（一旦将自定义元素添加到 DOM，即使 IE8 也不会忽略它们）。查看 HTML5shiv 以了解他们如何在旧浏览器中将其作为 HTML5 元素的 polyfill。

标签： jquery css html tags

【解决方案1】：

HTML5 不支持将所有元素都设为“有效”，因此它不适用于某些浏览器。就连 WAI-ARIA 也是不久前生效的，更不用说自定义标签了。但是，这并不意味着您不能使用它们。这个问题可能会有所帮助：Is there a way to create your own html tag in HTML5?

【讨论】：

【解决方案2】：

如果你只是想在一个元素上存储数据，你可以使用自定义属性（尽管它没有你期望的 XML 类型语法）：

类似于以下内容：

<div id="orange" data-fresh="true"></div>

然后你可以用 JS 选择这个：

var orange, fresh;
orange = document.getElementById("orange");
fresh = orange.getAttribute("fresh");

【讨论】：

【解决方案3】：

目前正在制定允许开发人员创作自己的元素的规范。 This new feature is called "Web Components"，在撰写本文时，默认情况下任何浏览器都不支持。

因此，虽然这可能不是直接的实际答案，但如果您打算保持其向前兼容，那么开始形式化自定义元素将是有利的。

就定义你自己的元素而言，现代浏览器会忽略它们无法识别的任何元素，但是你可以将 CSS display 样式添加到自定义元素中，这将告诉浏览器该元素将在某些情况下呈现时尚。这是故意的，以便旧浏览器可以使用新元素。

要支持旧版本的 IE，您需要调用document.createElement('custom-element-name') 才能让 IE 识别该元素。

基本上，要创建<example> 元素，您需要执行以下操作：

<!doctype html>
<html>
<head>
    <title>example element</title>
    <script>document.createElement('example');</script>
    <style>
        example {
            display: block;
        }
    </style>
</head>
<body>
    <example></example>
</body>
</html>

【讨论】：