メインのドキュメントと shadowRoot の中に id "foo" をもつ要素を置く
shadowRoot の中のボタンの onclick 属性から "foo" を参照すると
同じ shadowRoot 内ではなくてメインのドキュメントの foo が参照される


[main.html]
<!doctype html>

<link rel="import" href="component.html">

<input id="foo" value="1">
<compo-nent></compo-nent>

[component.html]
<template>
	<input id="foo" value="2">
	<button onclick="alert(foo.value)">click me</button>
</template>
<script>
	{
		const doc = document.currentScript.ownerDocument
		customElements.define("compo-nent", class extends HTMLElement {
			constructor() {
				super()
				const template = doc.querySelector("template")
				this.attachShadow({ mode: "open" }).append(template.content.cloneNode(true))
			}
		})
	}
</script>

ボタンを押すと
1

main.html で input のほうが先にあるからというわけでもなく compo-nent を先に持ってきても一緒
input の id を "bar" に変えても 2 にはならず foo が見つからないエラー

※ HTML Imports が削除されたので今ではこのコードは動かない