0

html5rocks でShadow DOM 101 チュートリアルをプレイしています。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
4

2 に答える 2

3

appendChild()そのように働いたことはありません

document.body.appendChild('<div></div>')同じエラーが発生します。

あなたが欲しいのはshadow.innerHTML = template;

于 2013-03-22T20:44:06.403 に答える