Почему я могу вызвать функцию, которая находится в тени dom?

Я создал пользовательский элемент, называемый «ящик памяти», как приведенный ниже код.
Обратите внимание на функцию «logthis», которая находится в «memory-box-template».Почему я могу вызвать функцию, которая находится в тени dom?

память box.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>

Теперь я использую пользовательский элемент "память ящик", как код ниже.

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» находится в каждой тени. Думаю, он не может быть вызван за пределами тени.

источник

2014-12-04 Nigiri

Как пояснялось here, в то время как HTML внутри Shadow DOM инкапсулирован, любой JavaScript НЕ - он находится в глобальной области, если вы не используете для этого определенные методы javascript (namescaping, IIFE).

Надеется, что это помогает,

Джонатан Додд

источник

2014-12-05 19:53:37

Я надеялся, что это позволило бы возможности связать встроенные обработчик событий, используя локальную область видимости компоненты 'onclick0«Foobar()»' ... Жаль , Было бы намного проще написать декларативный Javascript вместо императива. Я пытаюсь понять, как избежать hiting глобального масштаба, но я не нашел никаких советов, кроме namespacing. –

Почему я могу вызвать функцию, которая находится в тени dom?

ответ

Смежные вопросы