html Shady DOM示例

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html Shady DOM示例相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <h2>Hello from outside the Shadow DOM!</h2>
    
    <!-- This Custom Element will be our Shadow Host and contain the Shadow Root. -->
    <my-element></my-element>
    
    <!-- This template will hold the implementation for our element. -->
    <template id="tmpl">
      <style>
        h2 {
          color: blue;
        }
      </style>
      <h2>Hello from inside the Shadow DOM!</h2>
    </template>

    <!--
      Just load the polyfills for Custom Elements, Shady DOM, and Shady CSS.
      The Shady CSS polyfill only supports Custom Elements. Since we need
      both the Custom Elements and Shady polyfills, may as well load the bundle!
    -->
    <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-sd-ce.js"></script>
    
    <script>
      // prepareTemplate takes the template and applies the scoping attributes
      // to each element and puts styles in the <head>.
      ShadyCSS.prepareTemplate(tmpl, 'my-el');
      class MyElement extends HTMLElement {
        connectedCallback() {
          // styleElement enables Custom Properties to work on this element
          // and any of its children.
          ShadyCSS.styleElement(this);
          this.attachShadow({mode: 'open'});
          this.shadowRoot.appendChild(tmpl.content.cloneNode(true));
        }
      }
      customElements.define('my-element', MyElement);
    </script> 

  </body>
</html>

以上是关于html Shady DOM示例的主要内容,如果未能解决你的问题,请参考以下文章

如何在Polymer 2.0中启用Shady DOM?

使用Shady DOM document.getElementByID()的Polymer 2.0

聚合物组件Shady DOM样式只是对生产的评论

第15天 html css JavaScript dom选择器 示例左侧菜单

无法从 redux 存储中删除对象

DOM与BOM部分示例