0

我正在 html5rocks 上玩Shadow DOM 101 教程。我正在使用 Chrome 25.0.1364.172，当我尝试访问appendChildShadow DOM 根目录（如教程中所示）时，我得到一个 Uncaught Error: NotFoundError: DOM Exception 8. 我想我错过了一些明显的东西，但我不知道是什么。这是代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test the shadow dom</title>

    </head>
    <body>
        <div id="myName">Alon</div>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script id="myNameTemplate" type="text/x-tmpl-template">
            <style>
                .outer {
                    border:2px solid brown;
                    border-radius: 1em;
                    background: red;
                    font-size: 28pt;
                    width: 12em;
                    height:2em;
                    text-align: center;
                }
                .boilerplate {
                    color:white;
                    font-family: sans-serif;
                    padding:0.5em;
                }
                .name {
                    color:black;
                    background: white;
                    font-family: "Marker Felt", cursive;
                    font-size: 45pt;
                    padding-top:0.2em;
                }
            </style>
            <div class="outer">
                <div class="boilerplate">
                    Hi! my name is
                </div>
                <div class="name">
                    alon
                </div>
            </div>
        </script>
        <script>
            $(document).ready(function(){
                var shadow = document.querySelector("#myName").webkitCreateShadowRoot();
                console.log(shadow);// I get #shadow-root in the console
                var template = $("#myNameTemplate").html();//also tried text(), without jQuery with innerHTML and other options
                console.log(template);//I get the content of the template in the console
                shadow.appendChild(template); //this part breaks
             });
        </script>
    </body>
</html>

由于我的浏览器不支持<template>教程中显示的新标签，因此我将其更改为<script type="text/x-tmpl">.

编辑：当我尝试时，我从控制台收到同样的错误：

shadow.appendChild('<div></div>')
Error: NotFoundError: DOM Exception 8
4

2 回答 2

3

appendChild()从来没有那样工作过

document.body.appendChild('<div></div>')会给你同样的错误。

你想要的是shadow.innerHTML = template;

于 2013-03-22T20:44:06.403 回答
0

您有一些标记错误，并且脚本中选择模板的几行不正确。我已经修改了代码，所以它可以工作。

<script id="myNameTemplate" type="text/x-tmpl-template">
...
</script>

对此

<template id="myNameTemplate">
...
</template>

在页面底部的脚本中，我修改了您的模板变量，它出于某种原因使用了 jQuery 而不是querySelector(). 所以下面这段代码

$(document).ready(function(){
    var shadow = document.querySelector("#myName").webkitCreateShadowRoot();
    console.log(shadow);// I get #shadow-root in the console
    var template = $("#myNameTemplate").html();//also tried text(), without jQuery with innerHTML and other options
    console.log(template);//I get the content of the template in the console
    shadow.appendChild(template); //this part breaks
});

变成这个

$(document).ready(function(){
    var shadow = document.querySelector("#myName").webkitCreateShadowRoot();
    var template = document.querySelector("#myNameTemplate");
    shadow.appendChild(template.content);
});

这是完整的标记

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test the shadow dom</title>

</head>
<body>
    <div id="myName">Alon</div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <template id="myNameTemplate">
        <style>
            .outer {
                border:2px solid brown;
                border-radius: 1em;
                background: red;
                font-size: 28pt;
                width: 12em;
                height:2em;
                text-align: center;
            }
            .boilerplate {
                color:white;
                font-family: sans-serif;
                padding:0.5em;
            }
            .name {
                color:black;
                background: white;
                font-family: "Marker Felt", cursive;
                font-size: 45pt;
                padding-top:0.2em;
            }
        </style>
        <div class="outer">
            <div class="boilerplate">
                Hi! my name is
            </div>
            <div class="name">
                alon
            </div>
        </div>
    </template>
    <script>
        $(document).ready(function(){
            var shadow = document.querySelector("#myName").webkitCreateShadowRoot();
            console.log(shadow);// I get #shadow-root in the console
            var template = document.querySelector("#myNameTemplate");//also tried text(), without jQuery with innerHTML and other options
            console.log(template);//I get the content of the template in the console
            shadow.appendChild(template.content); //this part breaks
         });
    </script>
</body>

除了模板 AFAIK 之外，您不能使用任何其他内容.content，因为模板是一个文档片段，并且要访问该片段，您需要选择 HTML5 元素的内部内容<template>。

我的看法是，<template>标记基本上是一种静态 HTML 方法，用于创建可以使用 javascript 方法获取的文档片段querySelector()。如果您想通过扩展或其他方式附加 DOM，则可以使用创建片段createDocumentFragment()，但那是另一桶青蛙。

于 2013-11-20T14:25:44.587 回答