tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

scope-part.html (3049B)

      1 <!DOCTYPE html>
      2 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
      3 <link rel="help" href="drafts.csswg.org/css-cascade-6/#scoped-styles">
      4 <link rel="help" href="https://drafts.csswg.org/css-shadow-parts/#part">
      5 <link rel="match" href="scope-part-ref.html">
      6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1908279">
      7 <meta name="assert" content="Implicit @scope rule lets ::part selector to match inside the shadow tree">
      8 <template id="custom-element">
      9  <style>
     10    :host {
     11      display: block;
     12    }
     13    div {
     14      padding: 5px;
     15    }
     16  </style>
     17  <slot></slot>
     18  <div part="a"></div>
     19  <div part="b"></div>
     20 </template>
     21 <template id="custom-element-wrapper">
     22  <style>
     23    :host {
     24      display: block;
     25    }
     26    div {
     27      padding: 5px;
     28    }
     29  </style>
     30  <custom-element exportparts="a"></custom-element>
     31 </template>
     32 <custom-element>
     33  <style>
     34    @scope {
     35      :scope {
     36        background: red;
     37      }
     38    }
     39  </style>
     40 </custom-element>
     41 <custom-element>
     42  <style>
     43    @scope {
     44      :scope::part(a), :scope::part(b) {
     45        background: blue;
     46      }
     47    }
     48  </style>
     49 </custom-element>
     50 <custom-element>
     51  <style>
     52    @scope {
     53      :scope::part(a), :scope::part(b) {
     54        background: red;
     55      }
     56    }
     57  </style>
     58  <custom-element>
     59    <style>
     60      @scope {
     61        :scope::part(a), :scope::part(b) {
     62          background: blue;
     63        }
     64      }
     65    </style>
     66  </custom-element>
     67 </custom-element>
     68 <custom-element-wrapper>
     69  <style slot="s">
     70    @scope {
     71      :scope::part(a) {
     72        background: blue;
     73      }
     74      :scope::part(b) {
     75        background: red;
     76      }
     77    }
     78  </style>
     79 </custom-element-wrapper>
     80 <div>
     81  <template shadowrootmode=open>
     82    <!-- Inside a shadow root -->
     83    <custom-element-wrapper>
     84      <style slot="a">
     85        @scope {
     86          :scope::part(a) {
     87            background: blue;
     88          }
     89        }
     90      </style>
     91    </custom-element-wrapper>
     92  </template>
     93 </div>
     94 <div>
     95  <template shadowrootmode=open>
     96    <!-- Shadow root & host at the same time -->
     97    <div style="padding: 5px;">
     98      <template shadowrootmode=open>
     99        <div></div>
    100      </template>
    101      <style>
    102        @scope {
    103          :scope {
    104            background: red;
    105          }
    106        }
    107      </style>
    108    </div>
    109  </template>
    110 </div>
    111 <script>
    112 customElements.define(
    113  "custom-element",
    114  class extends HTMLElement {
    115    constructor() {
    116      super();
    117      let template = document.getElementById("custom-element");
    118      let templateContent = template.content;
    119 
    120      const shadowRoot = this.attachShadow({ mode: "open" });
    121      shadowRoot.appendChild(templateContent.cloneNode(true));
    122    }
    123  },
    124 );
    125 customElements.define(
    126  "custom-element-wrapper",
    127  class extends HTMLElement {
    128    constructor() {
    129      super();
    130      let template = document.getElementById("custom-element-wrapper");
    131      let templateContent = template.content;
    132 
    133      const shadowRoot = this.attachShadow({ mode: "open" });
    134      shadowRoot.appendChild(templateContent.cloneNode(true));
    135    }
    136  },
    137 );
    138 </script>