5

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

我遇到了“自定义元素是有效的 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>

4

3 回答 3

2

HTML5 不支持所有元素为“有效”，因此它不适用于某些浏览器。就连 WAI-ARIA 也是不久前生效的，更不用说自定义标签了。但是，这并不意味着您不能使用它们。这个问题可能会有所帮助：有没有办法在 HTML5 中创建自己的 html 标记？

于 2013-10-02T13:18:57.000 回答
2

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

类似于以下内容：

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

然后你可以用 JS 选择它：

var orange, fresh;
orange = document.getElementById("orange");
fresh = orange.getAttribute("fresh");
于 2013-10-02T13:20:45.857 回答
1

目前正在制定允许开发人员创作自己的元素的规范。这个新功能称为“Web 组件”，在撰写本文时，默认情况下任何浏览器都不支持。

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

就定义自己的元素而言，现代浏览器会忽略它们无法识别的任何元素，但是您可以将 CSSdisplay样式添加到自定义元素，这将告诉浏览器该元素旨在以某种方式呈现。这是故意的，以便旧浏览器可以使用新元素。

要支持旧版本的 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>
于 2013-10-02T13:22:48.930 回答