1

以下のコードのような「memory-box」というカスタム要素を作成しました。
「memory-box-template」にある関数「logthis」に注目してください。

メモリーボックス.html

<template id="memory-box-template">
    <input id="memory-box" type="form" />
    <input type="button" id="testbutton" />
    <script type="text/javascript">
    function logthis(me){
        console.log(me);
    }    
    </script>
</template>

<script type="text/javascript">
    (function() {
        var thisDoc = document.currentScript.ownerDocument;
        var storage = localStorage;

        var proto = Object.create(HTMLElement.prototype, {
            createdCallback: {
                value: function() {                
                    var temp = thisDoc.querySelector('#memory-box-template');
                    var con = document.importNode(temp.content, true);
                    this.createShadowRoot().appendChild(con);
                    var input = this.querySelector('::shadow #memory-box');
                    var data = storage.getItem(this.id);
                    input.value = data;
                    input.addEventListener('input', saveData.bind(input, this.id));
                }
            },
        });

        document.registerElement('memory-box', {
            prototype: proto
        });

        function saveData(id, e) {
            storage.setItem(id, this.value);
        }
    })();
</script>

ここで、以下のコードのようにカスタム要素「memory-box」を使用します。

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="import" href="/html/memory-box.html">
</head>

<body>
    <div><memory-box id="memory1"></memory-box></div>
    <div><memory-box id="memory2"></memory-box></div>
    <div><memory-box id="memory3"></memory-box></div>
    <div><memory-box id="memory4"></memory-box></div>   
</body>

<script type="text/javascript">
    logthis(this);
</script>

</html>

ご覧のとおり、index.html にスクリプトを入れて、関数 "logthis" を呼び出しました。そして、エラーは発生しませんでした。
なんで？
関数「logthis」は、各シャドウ ドームにあります。Shadow DOM の外では呼び出せないはずだと思います。

4

1 に答える 1

5

hereで説明されているように、Shadow DOM 内の HTML はカプセル化されていますが、JavaScript はカプセル化されていません。特定の JavaScript 技術 (ネームスケープ、IIFE) を使用しない限り、グローバル スコープにあります。

お役に立てれば、

ジョナサン・ドッド

于 2014-12-05T19:53:37.670 に答える