Co to jest korzeń cienia

100

W Narzędziach dla programistów Google Chrome widzę #shadow-rootprawo pod <html lang="en">tagiem. do czego służy i do czego służy? Nie widzę tego w Firefoksie ani w IE; tylko w Chrome, czy jest to specjalna funkcja?

Jeśli go otworzę, pokaże się <head>i, <body>a link obok named reveal, klikając, wskazuje na <head>i <body>, nic więcej.

html google-chrome dom google-chrome-devtools Andrzej
źródło

Odpowiedzi:

97

Jest to specjalny wskaźnik, że istnieje Shadow DOM . Te istniały od lat, ale do niedawna programiści nie mieli do nich dostępu. Chrome ma tę funkcję od jakiegoś czasu, inne przeglądarki wciąż nadrabiają zaległości. Można to zmienić w ustawieniach DevTools w sekcji „Elementy”. Odznacz pole „Pokaż cień DOM agenta użytkownika”. To przynajmniej ukryje wszystkie Shadow DOM utworzone wewnętrznie (np. Wybrane elementy). Nie jestem od razu pewien, czy ma to wpływ na elementy utworzone przez użytkowników, takie jak elementy niestandardowe.

Pojawiają się one również w elementach iframe, gdzie masz oddzielne drzewo DOM zagnieżdżone w innym.

Shadow DOM mówi po prostu, że jakaś część strony ma w sobie własny DOM. Style i skrypty mogą być określane w ramach tego elementu, więc to, co w nim działa, jest wykonywane tylko w tej granicy.

Jest to jeden z podstawowych elementów potrzebnych do działania składników sieci Web . To nowa technologia umożliwiająca programistom tworzenie własnych zamkniętych komponentów, których programiści mogą używać tak jak każdego innego elementu HTML.

Garbee
źródło
Jest to więc oczywiste pytanie, jak wykorzystać te utworzone niestandardowe elementy lub komponenty internetowe do dowolnego projektu? Powiedzmy, że używam polimeru ...
Kushal Jayswal
62

Na przykład Shadow DOM, gdy masz <video>tag na stronie internetowej, jest on wyświetlany jako jeden tag w głównym DOM, ale jeśli włączysz Shadow DOM, będziesz mógł zobaczyć kod HTML odtwarzacza wideo (odtwarzacz DOM).

Shadow DOM

Trafnie wyjaśniono to w tym artykule, http://webcomponents.org/articles/introduction-to-shadow-dom/

Nagendra Rao
źródło
Firefox wyświetla ostrzeżenie dotyczące bezpieczeństwa, gdy klikam łącze webcomponents.org, co oznacza problem z certyfikatem.
Sebastian Norr
1
Tak, wygląda na to, że ich certyfikat SSL wymaga odnowienia. Możesz nadal przeglądać witrynę, ignorując ostrzeżenie.
Nagendra Rao
5

W przypadku komponentów internetowych istnieje fundamentalny problem, który sprawia, że ​​widżety zbudowane z HTML i JavaScript są trudne w użyciu.

Problem : drzewo DOM wewnątrz widżetu nie jest oddzielone od reszty strony. Ten brak hermetyzacji oznacza, że ​​arkusz stylów dokumentu może przypadkowo zastosować się do części wewnątrz widżetu; Twój JavaScript może przypadkowo zmodyfikować części wewnątrz widżetu; Twoje identyfikatory mogą pokrywać się z identyfikatorami wewnątrz widżetu i tak dalej.

Shadow DOM rozwiązuje problem enkapsulacji drzewa DOM .

Na przykład, jeśli masz takie znaczniki:

<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>

to zamiast

Hello, world!

Twoja strona wygląda

こんにちは、影の世界!

Nie tylko to, jeśli JavaScript na stronie pyta o zawartość textContent przycisku, nie otrzyma “こんにちは、影の世界!”, ale “Hello, world!” dlatego, że poddrzewo DOM w katalogu głównym cienia jest hermetyzowane .

UWAGA : Powyższa treść pochodzi z https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/, ponieważ pomogła mi lepiej zrozumieć shadow DOM niż odpowiedzi już tutaj. Dodałem tutaj odpowiednią treść, aby pomóc innym, ale spójrz na link do szczegółowej dyskusji na ten temat.

Aniket Thakur
źródło