Chrome의 개발자 도구 #shadow-root에서 <html lang="en">태그 바로 아래에 표시됩니다. 그것은 무엇을하고 무엇을 위해 사용됩니까? Firefox 나 IE에서는 볼 수 없습니다. Chrome에서만이 기능이 특별한가요?
내가 쇼를 열 경우 <head>와 <body>라는 이름 옆에 링크를 reveal클릭하여, 그것을 가리키는 <head>과 <body>, 아무것도 다른.
답변
이것은 Shadow DOM 이 존재 한다는 특별한 표시기입니다 . 이들은 수년 동안 존재했지만 개발자는 최근까지 API를 제공받은 적이 없습니다. Chrome에는 한동안이 기능이 있었지만 다른 브라우저는 여전히 따라 잡고 있습니다. “Elements”섹션의 DevTools 설정에서 토글 할 수 있습니다. “Show User Agent Shadow DOM”의 선택을 취소하십시오. 이것은 최소한 내부적으로 생성 된 Shadow DOM을 숨길 것입니다 (선택 요소와 같이). 이것이 사용자 정의 요소와 같이 사용자가 생성 한 것에 영향을 미치는지 당장은 확실하지 않습니다.
이것들은 iframe과 같은 것에서도 나타납니다. 별도의 DOM 트리가 다른 트리 안에 중첩되어 있습니다.
Shadow DOM은 단순히 페이지의 일부에 자체 DOM이 있음을 의미합니다. 스타일과 스크립팅은 해당 요소 내에서 범위를 지정할 수 있으므로 해당 요소에서 실행되는 항목은 해당 경계에서만 실행됩니다.
이것은 웹 구성 요소 가 작동하는 데 필요한 주요 부분 중 하나입니다 . 이는 개발자가 다른 HTML 요소와 마찬가지로 사용할 수있는 자체 캡슐화 된 구성 요소를 구축 할 수있는 새로운 기술입니다.
답변
Shadow DOM의 예로 <video>웹 페이지에 태그가있을 때 메인 DOM에 하나의 태그로 표시되지만 Shadow DOM을 활성화하면 비디오 플레이어의 HTML (player DOM)을 볼 수 있습니다.
이것은 http://webcomponents.org/articles/introduction-to-shadow-dom/ 기사에서 적절하게 설명됩니다 .
답변
웹 컴포넌트의 경우 HTML과 JavaScript로 만든 위젯을 사용하기 어렵게 만드는 근본적인 문제가 있습니다.
문제 : 위젯 내부의 DOM 트리가 페이지의 나머지 부분에서 캡슐화되지 않습니다. 이러한 캡슐화가 없다는 것은 문서 스타일 시트가 실수로 위젯 내부의 부분에 적용될 수 있음을 의미합니다. 자바 스크립트가 실수로 위젯 내부의 일부를 수정할 수 있습니다. ID는 위젯 내부의 ID와 겹칠 수 있습니다.
Shadow DOM은 DOM 트리 캡슐화 문제를 해결 합니다.
예를 들어 다음과 같은 마크 업이있는 경우 :
<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>다음 대신
Hello, world!당신의 페이지는 다음과 같습니다
こんにちは、影の世界!뿐만 아니라 페이지의 JavaScript가 버튼의 textContent가 무엇인지 물어 보면을 얻지 “こんにちは、影の世界!”못하지만 “Hello, world!” 섀도우 루트 아래의 DOM 하위 트리가 캡슐화되기 때문 입니다.
참고 : 위의 내용은 https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ 에서 이미 여기에있는 답변보다 섀도우 DOM을 이해하는 데 도움이 되었기 때문에 선택했습니다. 다른 사람들에게 도움이되도록 여기에 관련 콘텐츠를 추가했지만 이에 대한 자세한 논의를 위해 링크를 살펴보십시오.
