Skip to content

Shadow DOM #386

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
joaquinelio merged 3 commits into from
Oct 7, 2020
Merged

Shadow DOM #386

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fcb4102
sombrasnadamas
joaquinelio Sep 22, 2020
c29ea2e
Apply suggestions from code review
joaquinelio Sep 23, 2020
ea751c2
"herramientas de desarrollo"
joaquinelio Oct 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Apply suggestions from code review 
Co-authored-by: Valentina VP <34555644+vplentinax@users.noreply.github.com>
  • Loading branch information
@joaquinelio @vplentinax
joaquinelio and vplentinax authored Sep 23, 2020
commit c29ea2e629761e3e34e0e99181696cb06a04d666
4 changes: 2 additions & 2 deletions 8-web-components/3-shadow-dom/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ Seguidamente usaremos el moderno estándar shadow DOM cubierto en "otras especif

Un elemento DOM puede tener dos tipos de subárboles DOM:

1. Light tree -- un subárbol normal, hecho de HTML hijos. Todos los subárboles vistos en capítulos previos eran "light".
1. Light tree -- un subárbol normal, hecho de hijos HTML. Todos los subárboles vistos en capítulos previos eran "light".
2. Shadow tree -- un subárbol shadow DOM, no reflejado en HTML, oculto a la vista.

Si un elemento tiene ambos, el navegador solamente construye el árbol shadow. Pero también podemos establecer un tipo de composición entre árboles shadow y light. Veremos los detalles en el capítulo <info:slots-composition>.
Expand All @@ -67,7 +67,7 @@ customElements.define('show-hello', class extends HTMLElement {
<show-hello name="John"></show-hello>
```

Así es como el DOM resultante se ve in las herramientas de desarrollador de Chrome, todo el contenido está bajo "#shadow-root":
Así es como el DOM resultante se ve en las herramientas de desarrollador de Chrome, todo el contenido está bajo "#shadow-root":

![](shadow-dom-say-hello.png)

Expand Down