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>

  • 相关阅读:
    扫盲-关系数据库的第一第二第三范式
    Arcgis SOE学习
    JavaScript学习笔记(持续更新)
    JavaScript学习心得
    Vue学习
    扫盲-ES6
    JavaScript原理学习
    (转)扫盲--JavaScript的立即执行函数
    (*)(转)要快速学习SSM框架,你需要一套学习曲线平滑的教程
    网络爬虫研发重点介绍
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10998499.html
Copyright © 2011-2022 走看看