zoukankan      html  css  js  c++  java
  • [Web Component] Allow External Styling of a Web Component's Shadow DOM

    The Shadow DOM protects your components from style conflicts. The same protection also makes it hard for users to modify the inner style for their own needs. In this lesson we go over 3 ways to define API for a controlled manipulation of encapsulated styles. 

    <style>
        custom-element {
            --text-color: purple; // Define a variable for the color
        }
        div.text {
            color: red !important;
            text-decoration: underline;
            font-size: 36px;
        }
    </style>
    
    <template>
        <style>
            .text {
                color: var(--text-color, blue); // set 'blue' as default value
                text-decoration: overline;
                font-size: 28px;
            }
        </style>
        <div class="text">
            In the Shadow
        </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));
            }
    
            // allow to use javascript to change the style
            changeStyles(styles) {
                const textElement = this.shadowRoot.querySelector('.text');
                Object.keys(styles).forEach(styleKey => {
                    textElement.style[styleKey] = styles[styleKey];
                })
            }
    
            // listen for the attributes changes, here only listening 'color', 'text-decoration'
            static get observedAttributes() {
                return ['color', 'text-decoration'];
            }
    
           // Once the attribute changes, apply the style 
            attributeChangedCallback(attribute, oldValue, newValue) {
                this.changeStyles({[attribute]: newValue});
            }
        }
        window.customElements.define('custom-element', CustomElement);
    </script>
    
    <custom-element></custom-element>
    <div class="text">Outside the shadow</div>

  • 相关阅读:
    汇编笔记(1) 寄存器
    阿里云RDS数据库备份文件恢复到本地数据库
    Java调用HTTPS接口的证书配置
    SQL面试题之行转列
    WebsiteCrawler
    supervisor
    简单学习github代码托管
    [egret+pomelo]实时对战游戏杂记(5)
    [egret+pomelo]实时游戏杂记(4)
    [egret+pomelo]实时游戏杂记(3)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10998499.html
Copyright © 2011-2022 走看看