Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Shadow DOM styling#426

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.

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

Already on GitHub?Sign in to your account

Merged
joaquinelio merged 10 commits intojavascript-tutorial:masterfromMoisesTR:patch-1
Oct 25, 2020
Merged
Changes fromall commits
Commits
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
126 changes: 63 additions & 63 deletions8-web-components/6-shadow-dom-style/article.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
# Shadow DOM styling
#EstiloShadow DOM

Shadow DOMmay include both`<style>`and `<link rel="stylesheet" href="…">` tags. In the latter case, stylesheets areHTTP-cached, so they are not redownloaded for multiple components that use same template.
Shadow DOMpuede incluir las etiquetas`<style>`y `<link rel="stylesheet" href="…">`. En este último caso, las hojas de estilo se almacenan en la cachéHTTP, por lo que no se vuelven a descargar para varios de los componentes que usan la misma plantilla.

As a general rule, local styles work only inside theshadow tree,and document styles work outside of it. But there are few exceptions.
Como regla general, los estilos locales solo funcionan dentro delshadow tree,y los estilos de documentos funcionan fuera de él. Pero hay pocas excepciones.

## :host

The`:host`selector allows to select theshadow host (the element containing the shadow tree).
El selector`:host`permite seleccionar elshadow host (el elemento que contiene el shadow tree).

For instance, we're making`<custom-dialog>`element that should be centered. For that we need to style the`<custom-dialog>` element itself.
Por ejemplo, estamos creando un elemento`<custom-dialog>`que debería estar centrado. Para eso necesitamos diseñar el elemento`<custom-dialog>`.

That's exactly what`:host`does:
Eso es exactamente lo que`:host`hace:

```html run autorun="no-epub" untrusted height=80
<template id="tmpl">
<style>
/*the style will be applied from inside to the custom-dialog element */
/*el estilo se aplicará desde el interior al elemento de diálogo personalizado */
:host {
position: fixed;
left: 50%;
Expand All@@ -42,32 +42,32 @@ customElements.define('custom-dialog', class extends HTMLElement {
</custom-dialog>
```

##Cascading
##Cascada

The shadow host (`<custom-dialog>`itself) resides in the light DOM,so it's affected by documentCSSrules.
El shadow host (`<custom-dialog>`en sí) reside en el light DOM,por lo que se ve afectado por las reglas deCSSdel documento.

If there's a property styled both in`:host`locally, and in the document, then the document style takes precedence.
Si hay una propiedad con estilo tanto en el`:host`localmente, y en el documento, entonces el estilo del documento tiene prioridad.

For instance, if in the document we had:
Por ejemplo, si en el documento tenemos:
```html
<style>
custom-dialog {
padding: 0;
}
</style>
```
...Then the `<custom-dialog>`would be without padding.
...Entonces el `<custom-dialog>`estaría sin padding.

It's very convenient, as we can setup "default" component styles in its`:host` rule, and then easily override them in the document.
Es muy conveniente, ya que podemos configurar estilos de componentes "predeterminados" en su regla`:host`, y luego sobreescribirlos fácilmente en el documento.

The exception is when alocalproperty is labelled `!important`, for such properties, local styles take precedence.
La excepción es cuando una propiedadlocalestá etiquetada como `!important`. Para tales propiedades, los estilos locales tienen prioridad.


## :host(selector)

Same as `:host`,but applied only if theshadow hostmatches the `selector`.
Igual que `:host`,pero se aplica solo si elshadow hostcoincide con el `selector`.

For example, we'd like to center the`<custom-dialog>`only if it has`centered` attribute:
Por ejemplo, nos gustaría centrar el`<custom-dialog>`solo si tiene el atributo`centered`:

```html run autorun="no-epub" untrusted height=80
<template id="tmpl">
Expand DownExpand Up@@ -101,40 +101,40 @@ customElements.define('custom-dialog', class extends HTMLElement {


<custom-dialog centered>
Centered!
¡Centrado!
</custom-dialog>

<custom-dialog>
Not centered.
No centrado.
</custom-dialog>
```

Now the additional centering styles are only applied to the first dialog: `<custom-dialog centered>`.
Ahora los estilos de centrado adicionales solo se aplican al primer diálogo: `<custom-dialog centered>`.

## :host-context(selector)

Same as `:host`,but applied only if theshadow hostor any of its ancestors in the outer document matches the `selector`.
Igual que `:host`,pero se aplica solo si elshadow hosto cualquiera de sus ancestros en el documento exterior coinciden con el `selector`.

E.g. `:host-context(.dark-theme)`matches only if there's`dark-theme`class on`<custom-dialog>`on anywhere above it:
p. ej. `:host-context(.dark-theme)`coincide solo si hay una clase`dark-theme`en`<custom-dialog>`en cualquier lugar por encima de el:

```html
<body class="dark-theme">
<!--
:host-context(.dark-theme)applies tocustom-dialogsinside .dark-theme
:host-context(.dark-theme)se aplica a loscustom-dialogsdentro de .dark-theme
-->
<custom-dialog>...</custom-dialog>
</body>
```

To summarize, we can use`:host`-family of selectors to style the main element of the component, depending on the context. These styles (unless`!important`)can be overridden by the document.
Para resumir, podemos usar`:host`-familia de selectores para aplicar estilos al elemento principal del componente, según el contexto. Estos estilos (a menos que sea`!important`)pueden ser sobreescritos por el documento.

##Styling slotted content
##Estilo de contenido eslotado(cuando un elemento ha sido insertado en un slot, se dice que fue eslotado por su término en inglés slotted)

Now let's consider the situation with slots.
Ahora consideremos la situación con los slots.

Slotted elements come fromlight DOM,so they use document styles. Local styles do not affect slotted content.
Los elementos eslotados vienen dellight DOM,por lo que usan estilos del documento. Los estilos locales no afectan al contenido de los elementos eslotados.

In the example below, slotted`<span>`isbold,as per document style, but does not take `background`from the local style:
En el siguiente ejemplo, el elemento eslotado`<span>`está enbold,según el estilo del documento, pero no toma el `background`del estilo local:
```html run autorun="no-epub" untrusted height=80
<style>
*!*
Expand DownExpand Up@@ -163,11 +163,11 @@ customElements.define('user-card', class extends HTMLElement {
</script>
```

The result is bold,but not red.
El resultado es bold,pero no red.

If we'd like to style slotted elements in our component, there are two choices.
Si queremos aplicar estilos a elementos eslotados en nuestro componente, hay dos opciones.

First, we can style the`<slot>`itself and rely on CSS inheritance:
Primero, podemos aplicarle el estilo al elemento`<slot>`en sí mismo y confiar en la herencia CSS:

```html run autorun="no-epub" untrusted height=80
<user-card>
Expand All@@ -191,14 +191,14 @@ customElements.define('user-card', class extends HTMLElement {
</script>
```

Here `<p>John Smith</p>`becomesbold,because CSS inheritance is in effect between the`<slot>`and its contents. But inCSSitself not all properties are inherited.
Aquí `<p>John Smith</p>`se vuelvebold,porque la herencia CSS está en efecto entre el`<slot>`y su contenido. Pero en el propioCSSno todas las propiedades se heredan.

Another option is to use`::slotted(selector)` pseudo-class. It matches elements based on two conditions:
Otra opción es usar la pseudoclase`::slotted(selector)`. Coincide con elementos en función de 2 condiciones.

1.That's a slotted element, that comes from thelight DOM.Slot name doesn't matter. Just any slotted element, but only the element itself, not its children.
2.The element matches the `selector`.
1.Eso es un elemento eslotado, que viene dellight DOM.El nombre del slot no importa. Cualquier elemento eslotado, pero solo el elemento en si, no sus hijos.
2.El elemento coincide con el `selector`.

In our example, `::slotted(div)`selects exactly `<div slot="username">`,but not its children:
En nuestro ejemplo, `::slotted(div)`selecciona exactamente `<div slot="username">`,pero no sus hijos:

```html run autorun="no-epub" untrusted height=80
<user-card>
Expand All@@ -224,54 +224,54 @@ customElements.define('user-card', class extends HTMLElement {
</script>
```

Please note,`::slotted`selector can't descend any further into theslot.These selectors are invalid:
Tenga en cuenta, que el selector`::slotted`no puede descender más en elslot.Estos selectores no son válidos:

```css
::slotted(div span) {
/*our slotted <div>does not match this */
/*nuestro slotted <div>no coincide con esto */
}

::slotted(div) p {
/*can't go inside light DOM */
/*No puede entrar en light DOM */
}
```

Also, `::slotted`can only be used in CSS.We can't use it in `querySelector`.
También, `::slotted`solo se puede utilizar en CSS.No podemos usarlo en `querySelector`.

## CSS hookswith custom properties
## CSS hookscon propiedades personalizadas

How do we style internal elements of a component from the main document?
¿Cómo diseñamos los elementos internos de un componente del documento principal?

Selectors like `:host`apply rules to`<custom-dialog>`element or`<user-card>`,but how to styleshadow DOMelements inside them?
Selectores como `:host`aplican reglas al elemento`<custom-dialog>`o`<user-card>`,¿pero cómo aplicar estilos a elementos delshadow DOMdentro de ellos?

There's noselectorthat can directly affect shadow DOM styles from the document. But just as we expose methods to interact with our component, we can expose CSSvariables (custom CSSproperties) to style it.
No hay ningúnselectorque pueda afectar directamente a los estilos del shadow DOM del documento. Pero así como exponemos métodos para interactuar con nuestro componente, podemos exponer variables CSS(propiedades CSSpersonalizadas) para darle estilo.

**CustomCSSproperties exist on all levels, both in lightand shadow.**
**Existen propiedadesCSSpersonalizadas en todos los niveles, tanto en lightcomo shadow.**

For example, inshadow DOMwe can use`--user-card-field-color`CSS variable to style fields, and the outer document can set its value:
Por ejemplo, en elshadow DOMpodemos usar la variable CSS`--user-card-field-color`para dar estilo a los campos, y en el documento exterior establecer su valor:

```html
<style>
.field {
color: var(--user-card-field-color, black);
/*if --user-card-field-coloris not defined, use blackcolor */
/*si --user-card-field-colorno esta definido, usarcolor negro */
}
</style>
<div class="field">Name: <slot name="username"></slot></div>
<div class="field">Birthday: <slot name="birthday"></slot></div>
```

Then, we can declare this property in the outer document for `<user-card>`:
Entonces, podemos declarar esta propiedad en el documento exterior para `<user-card>`:

```css
user-card {
--user-card-field-color: green;
}
```

Custom CSS properties pierce throughshadow DOM,they are visible everywhere, so the inner`.field`rule will make use of it.
Las propiedades personalizadas CSS atraviesan elshadow DOM,son visibles en todas partes, por lo que la regla interna`.field`hará uso de ella.

Here's the full example:
Aquí está el ejemplo completo:

```html run autorun="no-epub" untrusted height=80
<style>
Expand DownExpand Up@@ -311,24 +311,24 @@ customElements.define('user-card', class extends HTMLElement {



##Summary
##Resumen

Shadow DOMcan include styles, such as`<style>`or `<link rel="stylesheet">`.
Shadow DOMpuede incluir estilos, como`<style>`o `<link rel="stylesheet">`.

Local styles can affect:
Los estilos locales pueden afectar:
- shadow tree,
- shadow hostwith `:host`-family pseudoclasses,
-slotted elements (coming from light DOM), `::slotted(selector)`allows to select slotted elements themselves, but not their children.
- shadow hostcon `:host`-familia de pseudoclases,
-elementos eslotados (provenientes de light DOM), `::slotted(selector)`permite seleccionar elementos eslotados, pero no a sus hijos.

Document styles can affect:
- shadow host (as it lives in the outer document)
-slotted elements and their contents (as that's also in the outer document)
Los estilos de documentos pueden afectar:
- shadow host (ya que vive en el documento exterior)
-elementos eslotados y su contenido (ya que eso también está en el documento exterior)

WhenCSSproperties conflict, normally document styles have precedence, unless the property is labelled as`!important`.Then local styles have precedence.
Cuando las propiedadesCSSentran en conflicto, normalmente los estilos del documento tienen prioridad, a menos que la propiedad esté etiquetada como`!important`.Entonces, los estilos locales tienen prioridad.

CSS custom properties pierce throughshadow DOM.They are used as"hooks"to style the component:
Las propiedades CSS personalizadas atraviesan elshadow DOM.Se utilizan como"hooks"para aplicar estilos al componente:

1.The component uses a custom CSSproperty to style key elements, such as `var(--component-name-title, <default value>)`.
2.Component author publishes these properties for developers, they are same important as other public component methods.
3.When a developer wants to style a title, they assign`--component-name-title`CSS property for theshadow hostor above.
4.Profit!
1.El componente utiliza una propiedad CSSpersonalizada para aplicar estilos a elementos clave, como `var(--component-name-title, <default value>)`.
2.El autor del componente publica estas propiedades para los desarrolladores, son tan importantes como otros métodos de componentes públicos.
3.Cuando un desarrollador desea aplicar un estilo a un título, asigna la propiedad CSS`--component-name-title`para elshadow hosto superior.
4.¡Beneficio!
[8]ページ先頭
©2009-2025 Movatter.jp