그림자 DOM을 사용하여 HTML 및 을 사용하는 방법
HTML 슬롯 W3C가 만든 가장 주목할만한 표준 중 하나입니다. 그것을 W3C라는 또 다른 인상적인 표준과 결합하십시오. 템플릿, 함께 일할 멋진 요리가 있습니다. 를 할 수있는 HTML 요소 생성 및 추가 페이지로 JavaScript 사용 필요하고 중요한 과제이다..
코드 스 니펫이 특정 시간에만 나타난다., 또는 비슷한 구조의 HTML 요소를 수백 가지 입력하고 싶지는 않지만 원하는 경우 프로세스 자동화.
자바 스크립트에서 HTML 요소 생성하기 그렇게 바람직하지 않다.. 확인하고 재검사해야하는 번거 로움 때문에 모든 태그를 덮어서 올바른 순서로 배치했는지 너무 입력하고 추적 할 것이 많습니다. 그러나이 혼란, 해결책을 얻었다. 때 태그가 나타납니다. 무언가가 있어야한다면 동적으로 페이지에 추가됨, 너는 그것의 내부에 넣을 수있다. 요소.
이 게시물에서는, 당신이 어떻게 사용할 수 있는지 보여 드리겠습니다. 자바 스크립트와 함께 태그 미니 HTML 테이블 팩토리 만들기 수백 개의 유사한 테이블을 만들고 채울 수있는.
그만큼
그만큼 태그에는 브라우저에서 렌더링되지 않습니다. 자바 스크립트를 사용하여 문서에 제대로 추가 될 때까지 그만큼 요소.
에이 그림자 DOM 일반 DOM (HTML에서 파싱 된 문서 모델)과 유사합니다. 그것 범위가 지정된 트리를 만듭니다. (그림자 DOM 트리), 자체의 뿌리 또한 자체 스타일.
그림자 DOM 트리를 주 문서의 요소에 삽입하면 요소가 호출됩니다. 그림자 호스트 -, 그림자 호스트의 모든 자식 요소는 슬롯 속성 (앞서 말한 것과 같지 않음)
그림자 DOM은이 글을 쓰는 현재 (2017 년 7 월) WebKit 및 Blink 기반 브라우저에서만 지원됩니다. CaniUse에서 언제든지 브라우저 지원의 실제 상태를 확인할 수 있습니다.
HTML 설정하기
아직도 혼란 스럽습니까? 몇 가지 코드를 살펴 보겠습니다. 요소.
내부 템플릿 내부, 나는 또한 추가했다. 몇 가지 기본 스타일 테이블의 경우 , 거기에 잘 청사진으로 사용하다 ...에 대한 일부 테이블 만들기 문서에 추가됩니다. 있다
과 ) 자리 표시 자 역할 열 제목 및 셀 값 각 슬롯에는 고유 한 슬롯이 있습니다. 이름 그 속성 그것을 식별하다.