zoukankan      html  css  js  c++  java
  • [HTML5] Avoiding CSS Conflicts via Shadow DOM CSS encapsulation

    Shadow DOM is part of the web components specification. It allows us to ship self contained components along with their style and isolate the component from global style while "protecting" the host application from styles defined inside the component. In this lesson you will learn how to setup a shadow DOM and see the CSS encapsulation in action.

    <!-- Global Style-->
    <style>
        div.text {
            color: red;
            text-decoration: underline;
            font-size: 36px;
        }
    </style>
    
    <!-- Custom element template -->
    <template>
    <!-- Shadow dom style for custom element-->
        <style>
            .text {
                color: blue;
                text-decoration: overline;
                font-size: 28px;
            }
    
        </style>
        <div class="text">
            <slot name="content">Default text</slot>
        </div>
    </template>
    <script>
        const template = document.querySelector('template');
        class CustomElement extends HTMLElement {
            constructor() {
                super();
                this.attachShadow({mode: "open"});
                this.shadowRoot.appendChild(template.content.cloneNode(true))
            }
    
        }
        window.customElements.define('custom-element', CustomElement);
    </script>
    <custom-element>
        <p slot="content">In the Shadow</p>
    </custom-element>
    <div class="text">Outside the shadow</div>

  • 相关阅读:
    对称加密与非对称加密
    mysql 数据库备份
    Linux安装VM虚拟机
    Ubuntu安装桌面
    POM 总是提示找不到依赖
    Wine解决界面乱码
    There was an unexpected error (type=Not Found, status=404). /WEB-INF/views/login.jsp
    Linux打开chm文件
    vim 查找模式
    spring总结(02)注解
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10479098.html
Copyright © 2011-2022 走看看