title: Why can I call function which is in a shadow dom?
body: <p>I created a custom element called "memory-box" like the below code.<br>
  Please pay attention to the function "logthis" which is in "memory-box-template".</p>
  
  <p><strong>memory-box.html</strong></p>
  
  <pre><code>&lt;template id="memory-box-template"&gt;
      &lt;input id="memory-box" type="form" /&gt;
      &lt;input type="button" id="testbutton" /&gt;
      &lt;script type="text/javascript"&gt;
      function logthis(me){
          console.log(me);
      }    
      &lt;/script&gt;
  &lt;/template&gt;
  
  &lt;script type="text/javascript"&gt;
      (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);
          }
      })();
  &lt;/script&gt;
  </code></pre>
  
  <p>Now, I uses the custom element "memory-box" like the below code.<br></p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="import" href="/html/memory-box.html"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div&gt;&lt;memory-box id="memory1"&gt;&lt;/memory-box&gt;&lt;/div&gt;
      &lt;div&gt;&lt;memory-box id="memory2"&gt;&lt;/memory-box&gt;&lt;/div&gt;
      &lt;div&gt;&lt;memory-box id="memory3"&gt;&lt;/memory-box&gt;&lt;/div&gt;
      &lt;div&gt;&lt;memory-box id="memory4"&gt;&lt;/memory-box&gt;&lt;/div&gt;   
  &lt;/body&gt;
  
  &lt;script type="text/javascript"&gt;
      logthis(this);
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>As you can see, I putted a script in the index.html and called the function "logthis" just because I was curious. And no error occurred.<br>
  Why?<br>
  The function "logthis" is in each shadow doms. It's supposed not able to be called outside the shadow dom, I think.</p>