zoukankan      html  css  js  c++  java
  • WebComponents001

    Sample1: ShadowDom 隔离style,替换显示内容

    <button>Hello, world!</button>
    <script>
    var host = document.querySelector('button');
    var root = host.createShadowRoot();
    root.innerHTML = '<style>div{background-color : blue;}</style> <div>Hi, you are great!</div>';
    </script>
    <style>
        div {
            background-color : green;
        }
    </style>
    <div>Outside Element</div>

     Sample 2: 通过Template给shadow Dom设置内容, 注意template中的script的作用域是全局的,style的作用域是shadow dom局部

    <button>Hello, world!</button>
    <div>Outside Element</div> <template id="t1"> <style>div{background-color : blue;}</style> <div>Hi, you are great!</div> <script> //此处脚本不会被执行 var d = document.querySelector('div'); d.onclick = function(){ alert("Hi"); } </script> </template> <script> var host = document.querySelector('button'); var root = host.createShadowRoot(); var t = document.querySelector("#t1"); //通过innerHTML给shadow dom赋值,不会执行template中的script root.innerHTML = t.innerHTML; </script> <style> div { background-color : green; } </style>

     Sample 3: 为template中的content嵌入子节点。子节点的style受外部css的直接控制,但是会继承shadow dom中父节点的style

    <div id="hostNode"><div>Hello, world!</div></div>
    <div>Outside Element</div>
    <template id="t1">
        <style>div{background-color : blue; font-size: 30px;}</style> 
        <div>Hi, you are great!</div>
        <div>
            <content></content>
        </div>
    </template>
    <script>
    var host = document.querySelector('#hostNode');
    var root = host.createShadowRoot();
    var t = document.querySelector("#t1");
    var content = t.content;
    root.appendChild(document.importNode(content,true));
    </script>
    <style>
        div {
            background-color : green;
                font-size: 40px;
        }
        #mytext {
            background-color : red;
        }
    </style>

     sample 4:带有select的content

    <div id="hostNode">
        <div class="kk">Hello, kk world!</div>
        <div class="hh">Hello, hh world!</div>
    </div>
    <div>Outside Element</div>
    <template id="t1">
        <style>div{background-color : blue; font-size: 30px;}</style> 
        <div>Hi, you are great!</div>
        <div>
            <content select=".hh"></content>
            分割<br>
            <content select=".kk"></content>
        </div>
    </template>
    <script>
    var host = document.querySelector('#hostNode');
    var root = host.createShadowRoot();
    var t = document.querySelector("#t1");
    var content = t.content;
    root.appendChild(document.importNode(content,true));
    </script>
    <style>
        div {
            background-color : green;
            font-size: 40px;
        }
        #mytext {
            background-color : red;
        }
    </style>
  • 相关阅读:
    Jdk1.8 HashMap源码分析
    瘦身部署应用
    Redis 创建和使用集群(yum方式安装低版本)
    Redis 创建和使用集群
    记录一下
    Oracle 开发人员权限控制
    Linux 免密登录远程服务器及执行相关命令
    Oracle 连接表空间并执行SQL文件
    MySQL 8.0.13安装教程(windows 64位) (转)
    scrapy中Selector的使用
  • 原文地址:https://www.cnblogs.com/yoyogis/p/4738257.html
Copyright © 2011-2022 走看看