html5-template

2열

1답변

두 개의 사용자 정의 요소를 생성하고 있으며, 둘 다 link rel = "import"를 사용하여 index.html에 추가됩니다. 하나는 슬롯이있는 컨테이너이고 다른 하나는 슬롯에 숫자를 넣는 것입니다. 두 요소는 각각 템플리트가있는 HTML 파일과이를 사용자 정의 요소로 정의하는 js 파일에 대한 링크가 있습니다. 내가 사용하고있는 HTML 템플릿에

0열

2답변

"document.currentScript"및 "ownerDocument"란 무엇입니까?

웹 구성 요소를 배우고 있습니다. 나는 전혀이 부분을 이해하지 못하는 var tmpl = document.querySelector('template'); : (document.currentScript||document._currentScript).ownerDocument이 currentScript 무엇 , ownerDocument 무엇 <template

3열

1답변

생성자 또는 connectedCallback에 템플릿을 적용해야하는시기

언제 constructor 또는 connectedCallback에 템플릿을 적용해야합니까? 콜백에서 이것을 수행 할 때 전에 attributeChangedCallback이 호출되고 요소를 쿼리 할 수 없습니다. export class TestElement extends HTMLElement { constructor() { super()

1열

1답변

텍스트 선택 그림자-DOM에서 제공하는 스타일의 경우에는 작동하지 않는 문제가 재현 어떤 단계

:이 (1) 크롬 브라우저에서 코드 아래 실행 (2)에 시도를 "Shadow dom"이있는 부분에서 "Second"라는 단어를 더블 클릭하십시오. & "그림자없는 dom". 예상 된 결과 : 단어는 "둘째"을 선택을하셔야합니다 (이 부분에서 일하고 -2 등) 실제 동작 : 텍스트를 선택하지 않습니다 을 더블 클릭합니다. var arr = document.q

1열

1답변

웹 구성 요소 (바닐라, 폴리머 없음) : <template> 내용로드하는 방법?

저는 웹 구성 요소에 새로운입니다. 몇 가지 예를 살펴 보았지만 별도의 웹 구성 요소를로드 (DOM에 삽입)하는 방법을 실제로 파악할 수 없습니다. 이것은 내 index.html을하다 <template id="my-element"> <p>Yes, it works!</p> </template> <script> document.regist

2열

2답변

td, tr 또는 th를 저장하는 DocumentFragment를 만들 수 없습니까?

DocumentFragments에 tr, th 또는 td 태그가 포함될 수 있습니까? 내가 이렇게 할 경우 : var template = document.createRange().createContextualFragment( '<table></table>' ); console.log(template.childNodes); 내

4열

1답변

HTML <template>은 Firefox에서 비어 있습니다 (devtools 이후 및 document.importNode())

html-templates를 사용하고 싶습니다. Chrome을 사용하면 모든 것이 작동하지만 Firefox에서는 template 요소에 Content가 없습니다 ... 아마도 디버거에는 표시되지 않지만 템플릿의 내용을 인스턴스화하려고하면 콘텐츠가 없습니다. . 이 템플릿 요소 : ... <body> <template>qwertz</template

1열

2답변

템플릿 리터럴에 HTML 버튼`onclick` 설정

템플릿 리터럴을 사용하는 html 템플릿이 있습니다. 함수는 아래처럼 보입니다. // postCreator.js export const blogPostMaker = ({ title, content, address, id }, deletePost) => { const innerHtml = ` <blog-post> <h1 class

2열

1답변

바닐라 js가있는 자체 포함 된 사용자 정의 요소에서 템플릿을 스탬프 처리하는 방법은 무엇입니까?

타로 카드를 보여주는 맞춤 구성 요소가 있습니다. 사용자 지정 요소 전에 템플릿을 정의했습니다. wc의 connectedCallback에서 shadowroot에 템플릿 자체를 첨부하고 shadowroot에 복제하여 템플릿을 찍었습니다. 나는 두 가지 이유로 이것을했다 : 자기 포함 된 모듈이되기를 원한다. 따라서 내 사용자 정의 요소와 동일한 위치에 템플릿

1열

1답변

"동일한 유형의 웹 구성 요소에서 스타일 공유"

올바르게 이해하면 웹 구성 요소의 인스턴스를 만드는 것이 섀도우 루트를 만들고 마크 업을 복사하는 것과 같이 요약 할 수 있습니다. 템플릿에 CSS 태그가 포함되어있는 경우 물론 템플릿에도 CSS 태그가 복사됩니다. 따라서 웹 구성 요소의 내부 마크 업에 속한 스타일 범위를 지정할 수 있습니다. 질문 : 내가 바로 그 웹 구성 요소의 인스턴스의 톤을 만들