중첩 템플릿의 내용을 읽으십시오.

Question

.content 중첩 된 <template>에 JS 액세스를 받으려면 어떻게해야합니까?

나는 (외부 파일에서 템플릿의 컨텐츠를 가져옵니다하는) 내 imported-template 요소 <template>을 확장하려고하고 나는 기본 <content>에 유사한 방식으로 <imported-content>을 구현하고 싶습니다. 이렇게하려면, 즉 중첩 템플릿 this.content가 비어, 나는 단순히

this.content.querySelector("imported-content") 

을 시도하지만 발생했습니다.

<script> 
    (function() { 
     var XHTMLPrototype = Object.create((HTMLTemplateElement || HTMLElement).prototype); 
     XHTMLPrototype.attachedCallback = function() { 
      //.. 
      var distributeHere = this.content.querySelector("imported-content"); 
      var importedContent = document.createElement("span"); 
      importedContent.innerHTML = "Imported content"; 
      distributeHere.parentNode.replaceChild(importedContent, distributeHere); 
     } 

     document.register('imported-template', { 
      prototype: XHTMLPrototype, 
      extends: "template" 
     }); 
    })(); 
</script> 
<template id="fails" bind> 
    <ul> 
     <template is="imported-template" bind="{{ appdata }}"> 
      <li> 
       <imported-content></imported-content> 
      </li> 
     </template> 
    </ul> 
</template> 

JSFiddle here

는 버그, 디자인 문제, 또는 단지 템플릿 심 제한하는 경우 나는 확실하지 않다.

잘못된 라이프 사이클 콜백에서이를 확인하려고 했으므로 MutationObserverfiddle here을 시도했지만 돌연변환은 발생하지 않습니다.

Answer 1

changed 선택자를 this.content.querySelector("[is='imported-content']")으로 설정하십시오. 이게 네가하려는거야?