<body> 요소의 그림자 DOM이 나쁜 생각입니까?

사용 사례 : 호출 될 때 100 % H/W 및 다른 모든 조상 DOM 요소의 기능을 사용해야하는 모달 대화 상자. 페이지/웹 애플리케이션 당 하나만 존재합니다. Javascript 모듈이 도착하면이를 적용 할 수 있습니다.<body> 요소의 그림자 DOM이 나쁜 생각입니까?

웹 개발자는 내 웹 구성 요소 인 Google지도에 <DIV></DIV>과 같은 것을 쉽게 제공 할 수 있지만, 본질적으로 document.body에 그림자 DOM을 첨부하는 것이 좋지 않습니다. Chrome에서 오류가없는 옵션입니다.

관련된 문제는 요소의 그림자 DOM 포스트 렌더링을 대체 할 수 있습니까? 그림자 DOM 1.0은 요소 당 그림자 DOM 하나만 허용한다는 것을 알고 있지만 런타임에 주어진 임시 환경/분위기를 만족시키기 위해 적절한 템플릿을 경험적으로 조합해야합니다. 내가 생각한 한 가지 방법은로드 시간에 빈 그림자 DOM을 첨부하여 어떤 <SLOT> 경쟁자도 렌더링하지 못하도록 차단 한 다음 UI가 필요한 위치를 알아 냈을 때 자리 표시 자 그림자 DOM을 스왑/복제/대체하는 것입니다. 본격적인 ridge didge 템플릿 콘텐츠.

So : - 1) BODY를 호스트로 사용해도 괜찮습니까? 2) 그림자 DOM을 대체하는 가장 좋은 방법은 무엇입니까?

출처

2017-05-18 McMurphy

요소 당 1 개의 그림자 DOM 제한으로 document.body에 첨부하면 잠재적으로 서로 다른 구성 요소가 하나의 리소스에 대해 경쟁하거나 적어도 조정하도록 강제함으로써 캡슐화 및 격리의 포부에 부딪 힙니다. 웹 작성자에게 적절한 호스트를 지정하도록 요청하는 것이 "더 좋고"유연하게 보입니다. – McMurphy

1) BODY를 호스트로 사용해도 괜찮습니까?

예

2) 그림자 DOM을 교체하기위한 최선의 방법은 무엇입니까?

사용 중 하나

body.shadowRoot.innerHTML = [new template innerHTML]

나 :

body.shadowRoot.replaceChild(newNodes, oldNode)

나 :이 빠른 일부가 될 수 있도록 template.content와

body.shadowRoot.innerHTML = '' 
body.shadowRoot.appendChild(newNodes)

직접 이미 구문 분석의 DocumentFragment를 얻을 수 상황은와 함께template literals의 이익을 취한 다음 일부 변수의 값을 포함 할 수 있습니다.

출처

2017-05-18 13:42:35 Supersharp

어쨌든 body 요소를 사용하지 않고 완전한 W/H 모달 대화 상자를 추가 할 수 있습니다. – Supersharp

다시 도움을 주셔서 감사합니다. 아직 나는 template.innerHTML에 비해 template.content의 부가가치 뉘앙스를 이해하지 못한다. 그러나 나는 읽을 것이다. 나는 파스 엘자 대 텍스트를 추측한다. 좋은 소식은 Shadow DOM이 아직 닫힐 수 있다는 것입니다. INCLUDE에 대한 동의를 얻지 못했지만 웹 구성 요소가 확실히 현실화되고 있다는 것은 부끄러운 일입니다! – McMurphy

답변을 업데이트했습니다. – Supersharp

<body> 요소의 그림자 DOM이 나쁜 생각입니까?

답변

관련 문제