html-templates를 사용하고 싶습니다. Chrome을 사용하면 모든 것이 작동하지만 Firefox에서는 template 요소에 Content가 없습니다 ... 아마도 디버거에는 표시되지 않지만 템플릿의 내용을 인스턴스화하려고하면 콘텐츠가 없습니다. .HTML <template>은 Firefox에서 비어 있습니다 (devtools 이후 및 document.importNode())
이 템플릿 요소 :
...
<body>
<template>qwertz</template>
</body>
...
Firefox의 devtools Inspector는 DOM보기의 기본 창에 template 내용을 표시하지 않습니다.
template 요소를 마우스 오른쪽 버튼으로 클릭 파이어 폭스의 Inspector에서 template 내용을 검사 할 경우
Firefox devtools는 template 요소의 모든 DOM 속성을 탐색 할 수있는 속성 창을 표시합니다.
innerHTML 속성을 보거나 content 속성을 살펴보면 template 내용을 볼 수 있습니다.
var templateContent = document.querySelector("template").content,
templateContentClone = document.importNode(templateContent, true)
document.body.appendChild(templateContentClone)<!doctype html>
<body>
<template>qwertz</template>
</body>중요한 부분 것은 이해하기 :
는 지금까지 템플릿의 내용을 인스턴스화하는 방법으로, 여기에 간단한 예제 당신이 원하면 템플릿 내용이있는 항목이면 Document.importNode() 또는 Node.cloneNode()을 사용하여 내용을 복제하거나 가져와야합니다.
polyfill 'webcomponents-lite.js'를 제거하면 템플리트의 내용을 볼 수 있습니다 (DOM Properties에서). 이유가 궁금합니다. – treeno
polyfill이 그 효과를 갖는 이유는 모르겠지만 그 대답을 얻으려면 아마도 별도의 질문을 게시하고 싶을 것입니다. – sideshowbarker
이유는 제 실수였습니다. 나는 ShadowDOM을 가진 custom 요소를 가졌다. 그리고 그 custom 요소에는'shadowRoot'라는 속성에 대한 setter와 getter가 있습니다.내가 몰랐던 것은 HTMLElement의 Polyfill에도이 속성이 있기 때문에 실수로 setter/getter에 오버로드가 발생했습니다. 그것을 제거한 후에, 모든 것이 효과가있었습니다. – treeno
[예상되는 동작] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)입니다. "HTML 요소는 페이지가로드 될 때 렌더링되지 않지만 나중에 JavaScript를 사용하여 런타임 중에 인스턴스화 될 수있는 클라이언트 측 내용을 유지하는 메커니즘입니다." Chrome에서는 아무 것도 보지 않아야합니다. – APAD1
Chrome의 디버거가 # document-fragment라는 노드 아래에 콘텐츠를 표시하고 있습니다. – treeno
불편을 끼쳐 드려 죄송합니다. 렌더링 된 DOM에 대해 이야기하고 있다고 생각했습니다. – APAD1