바닐라 웹 컴포넌트 구조

바닐라 웹 컴포넌트를 구조화하려고합니다. 이전에 Polymer를 사용했고 구성 요소에 대해 하나의 파일에 템플릿, 스타일 및 JavaScript를 가질 수 있다는 사실을 좋아합니다. 가능하다면 '바닐라'웹 구성 요소를 사용하여이를 달성하고 싶지만 어떻게 작동 할 수는 없습니다. 다음과 같이 나는 here의 코드를 촬영하고 내가 사용하고 파일에 추가 한 : 우리는 템플릿을 선택하려고 할 때 그 시점에서 템플릿이 없기 때문에 존재하지 않기 때문에바닐라 웹 컴포넌트 구조

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>Component test</title> 

    <link rel="import" href="x-foo-from-template.html"> 
    </head> 
    <body> 
    <x-foo-from-template></x-foo-from-template> 
    </body> 
</html>

이 실패 DOM에서 (오른쪽?).

이것을 달성 할 방법이 있습니까? 개인적으로 document.createElement을 사용하여 JavaScript에서 HTML을 만드는 방법을 선호합니다.

출처

2016-09-19 Ben Thomas

가져온 문서에서 템플릿 얻을 수있는 2 가지 주요 방법이 다음과 같습니다 <link> 요소하여 import 특성에서

가 <link rel=import> 요소가 수입 포함하는 import 재산을 소유는 문서. 당신은 그것이 <template>를 가져에 querySelector 호출을 수행 할 수 있습니다 importNode() 또는 cloneNode()를 사용하여

var doc = document.querySelector('link[href$="x-foo-from-template.html"]').import 
var template = doc.querySelector('template')

그런 다음 사용자 지정 요소의 템플릿을 가져 오기 (또는 그 그림자 DOM에서).

2 형태 스크립트, document.currentScript 참조 스크립트가 해석되는 글로벌 값을 해석하고, 따라서 그 때에 프로퍼티 ownerDocument 소유 문서에 대한 참조 currentScript

의 ownerDocument 속성 스크립트. 당신은 그것에 querySelector 호출을 수행 할 수 있습니다

var template = document.currentScript.ownerDocument.querySelector('template')

참고 :이 connectedCallback() 또는 attachedCallback() 같은 후속 호출에 더 이상 작동하지 않도록currentScript 값, 일시적으로 설정되어 있도록거야 필요한 경우 나중에 다시 사용하기 위해 구문 분석 시간에 영구 변수에 암기해야합니다.

출처

2016-09-20 07:41:29 Supersharp

답장을 보내 주셔서 감사합니다. 부끄러운 줄 알아. 내가 원하는대로 할 수는 없어.하지만 이럴거야! –

정확히 무엇을 원하니? 아마 내 대답을 향상시킬 수 있습니다. – Supersharp

이것을 다시 읽은이 답변에 만족합니다. –

답변

관련 문제