There are 2 main methods to get the template from the imported document:
1. From the the import property of the <link> element
The <link rel=import> elements own an import property that contains the imported document.
You can perform a querySelector call on it to fetch the <template>:
var doc = document.querySelector( 'link[href$="x-foo-from-template.html"]').import
var template = doc.querySelector( 'template' )
Then import the template in the custom element (or in its Shadow DOM) using either importNode() or cloneNode().
2. Form the ownerDocument property of currentScript
When a script is parsed, the global value document.currentScript references the script being parsed, and therefore its propery ownerDocument is a reference to the document that owns the script. You can perform a querySelector call on it:
var template = document.currentScript.ownerDocument.querySelector( 'template' )
Note: the currentScript value is set temporarily, so it won't work any more in subsequent calls, like connectedCallback() or attachedCallback(), so you'll have to memorize it in a persistent variable at parse time, to reuse it later when needed.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
