https://takao.blog/es/tags/encapsulation/Recent content in Encapsulation on Commentary of TakaoHugo -- gohugo.ioesCommentary of TakaoSun, 12 Jul 2026 04:12:51 +0900https://takao.blog/es/web/css-scoped-styles/Sun, 15 Dec 2024 00:00:00 +0900https://takao.blog/es/web/css-scoped-styles/<img src="https://takao.blog/img/thumbnail/css-scoped-styles-es.png" alt="Featured image of post Estilos con alcance CSS: @scope y estrategias de encapsulación" /><p>El alcance de CSS ha sido un desafío constante. <code>@scope</code> introduce control de cascada basado en proximidad, aplicado por el navegador.</p> <h2 id="la-regla-scope">La regla @scope </h2><p><code>@scope (.card) { .title { font-size: 1.25rem; } }</code> limita estilos a un elemento raíz y sus descendientes. La novedad clave es la <strong>proximidad de alcance</strong>: estilos más cercanos al elemento tienen prioridad. Puedes definir límites con <code>to (.card__footer)</code>.</p> <h2 id="shadow-dom">Shadow DOM </h2><p>Aislamiento total de estilos, marcado y comportamiento. Esencial para bibliotecas de widgets distribuidos, pero añade sobrecarga de ejecución.</p>