Question

请准备以下文件：

<!DOCTYPE html>    
<html>
    <head>  
        ...
    </head>
    <lml-templates>
        ...
    </lml-templates>
    <body>
        ...
    </body>
</html>

我们目前正在使用lml-template样式的{display: none}自定义元素。此模板区域包含各种包装器，以供Web应用程序稍后使用以生成＆＃34; normal＆＃34; <body>下的加价。

它包含用户定义的标记，用作将出现在正文中的元素的模板。我们正在使用此方法，以便<body>标记下的所有内容都具体，<lml-templates>下的所有内容都是抽象的，但仍可使用document.querySelector查询。

到目前为止，即使在较旧的浏览器上，一切似乎都运行正常。

根据this article，据说头是html的第一个孩子，身体是最后一个。然而，我无法找到关于＆＃34;接受＆＃34;的任何文件。除了这两个小家伙之外，<html>的儿童节点。

我知道有些浏览器会修复non-<li> <ul> DOM个孩子的不正确标记，但它从未试图修复我们的代码。

CSS似乎并不关心，因为元素仍在lml-template { display: none; }中。样式如：

<!DOCTYPE html>    
<html>
    <head>  
        ...
    </head>

    <body>
        <lml-templates>
            ...
        </lml-templates>

        <div id="mainStage">
            ...
        </div>
    </body>
</html>

工作得很好。 lml-template下的其他内容都不需要样式，因为它不可见。

我应该担心这个吗？这是不好的做法吗？最糟糕的情况是，我们只需将模板移动到正文下，然后将其他所有内容包装在第二个包装内，如下所示：

position: fixed;

但它几乎摧毁了我们图书馆背后的整个想法。希望这不仅仅是一个＆＃34; Google更多＆＃34;问题

Google查询未成功使用：

自定义html子节点
接受了html子节点
html子节点不是正文
有效的dom html子节点

感谢。

编辑：

注意到Skimlinks＆＃39; Chrome插件（联盟营销合作伙伴）也使用相同的方法，它似乎工作。我们不能理所当然地认为，因为他们使用这种方法，它变成了一种很好的做法，但它很有趣。

同样，他们的标记实际上会在固定位置（Environment.getExternalStoragePublicDirectory( Environment.DIRECTORY_PICTURES)）可见。他们可能不希望他们的元素与当前文档进行交互。可能？

Answer 1

来自spec：

内容模型：
head元素后跟body元素。

这意味着html元素可能仅包含head后跟body的顺序，没有其他元素且head body 1}}和body必须在那里。（为简洁起见，可省略标记，但仍会在DOM树中生成元素 - 标记和元素之间的区别很重要的一种情况，为什么知道更好的人会继续喋喋不休。）

如果您在无效标记的DOM树表示方面询问有效性，我不确定是否可以以任何有意义的方式进行测量，因为您首先依赖于无效标记，即使所述无效标记的错误恢复在规范中明确定义。

事实上，该规范确实解释了how markup appearing between the </head> end tag and <body> start tag should be handled，所以Skimlinks似乎表现得这样，这意味着Chrome知道我们不知道的事情。无论哪种方式，它肯定不是应该依赖的东西，因为最终你仍然使用无效的标记，这几乎从来都不是好的做法。

如果您有兴趣保持标记有效，我还建议您将元素作为第一个孩子移动到$config['global_xss_filtering'] = false;。这正是规范告诉实现要做的事情，如上面的链接所示。

是否会使DOM与节点不同？

1 个答案: