diff --git a/8-web-components/3-shadow-dom/article.md b/8-web-components/3-shadow-dom/article.md index fafc4754c..1f21748bf 100644 --- a/8-web-components/3-shadow-dom/article.md +++ b/8-web-components/3-shadow-dom/article.md @@ -1,32 +1,32 @@ # Shadow DOM -Shadow DOM serves for encapsulation. It allows a component to have its very own "shadow" DOM tree, that can't be accidentally accessed from the main document, may have local style rules, and more. +Shadow DOM sirve para el encapsulamiento. Le permite a un componente tener su propio árbol DOM oculto, que no puede ser accedido por accidente desde el documento principal, puede tener reglas de estilo locales, y más. -## Built-in shadow DOM +## Shadow DOM incorporado -Did you ever think how complex browser controls are created and styled? +¿Alguna vez pensó cómo los controles complejos del navegador se crean y se les aplica estilo? -Such as ``: +Tales como ``:
-The browser uses DOM/CSS internally to draw them. That DOM structure is normally hidden from us, but we can see it in developer tools. E.g. in Chrome, we need to enable in Dev Tools "Show user agent shadow DOM" option. +El navegador usa DOM/CSS internamente para dibujarlos. Esa estructura DOM normalmente está oculta para nosotros, pero podemos verla con herramientas de desarrollo. Por ejemplo en Chrome, necesitamos habilitar la opción "Show user agent shadow DOM" en las heramientas de desarrollo. -Then `` looks like this: +Entonces `` se ve algo así: ![](shadow-dom-range.png) -What you see under `#shadow-root` is called "shadow DOM". +Lo que ves bajo `#shadow-root` se llama "shadow DOM". -We can't get built-in shadow DOM elements by regular JavaScript calls or selectors. These are not regular children, but a powerful encapsulation technique. +No podemos obtener los elementos de shadow DOM incorporados con llamadas normales a JavaScript o selectores. Estos no son hijos normales sino una poderosa técnica de encapsulamiento. -In the example above, we can see a useful attribute `pseudo`. It's non-standard, exists for historical reasons. We can use it style subelements with CSS, like this: +En el ejemplo de abajo podemos ver un útil atributo `pseudo`. No es estándar, existe por razones históricas. Podemos usarlo para aplicar estilo a subelementos con CSS como aquí: ```html run autorun @@ -116,7 +116,7 @@ For example: ``` -1. The style from the document does not affect the shadow tree. -2. ...But the style from the inside works. -3. To get elements in shadow tree, we must query from inside the tree. +1. El estilo del documento no afecta al árbol shadow. +2. ...Pero el estilo interno funciona. +3. Para obtener los elementos en el árbol shadow, debemos buscarlos (query) desde dentro del árbol. -## References +## Referencias - DOM: