Question

我在html5rocks玩Shadow DOM 101 tutorial。我正在使用Chrome 25.0.1364.172和当我尝试appendChild到Shadow 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

Answer 1

appendChild()从未像那样工作

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

你想要的是shadow.innerHTML = template;

Answer 2

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

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

到这个

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

在页面底部的脚本中，我修改了模板var，由于某种原因使用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以外的任何内容，因为模板是Document Fragment并且要访问该片段，您需要选择HTML5元素的内部内容<template>

我看待它的方式是<template>标记基本上是一种静态HTML方式，用于创建可以使用javascript方法querySelector()获取的文档片段。你可以使用createDocumentFragment()创建片段，如果你想通过扩展名附加DOM，或者是另外一堆青蛙。

无法填充shadow DOM（以下教程）

2 个答案: