tor-browser

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

animation-part.html (1267B)

      1 <!doctype html>
      2 <title>Animation name and ::part()</title>
      3 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
      4 <link rel="author" title="Mozilla" href="https://mozilla.org">
      5 <link rel="match" href="animation-part-ref.html">
      6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1852834">
      7 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/1995">
      8 <wrapper-el></wrapper-el>
      9 <script>
     10 class WrapperEl extends HTMLElement {
     11  constructor() {
     12    super();
     13    this.attachShadow({ mode: "open" });
     14    this.shadowRoot.innerHTML = `
     15      <style>
     16        @keyframes green {
     17          from { background: green; }
     18          to { background: green; }
     19        }
     20 
     21        display-el::part(icon) {
     22          animation: green 1s linear infinite;
     23        }
     24      </style>
     25      <display-el></display-el>
     26    `;
     27  }
     28 }
     29 customElements.define("wrapper-el", WrapperEl);
     30 
     31 class DisplayEl extends HTMLElement {
     32  constructor() {
     33    super();
     34    this.attachShadow({ mode: "open" });
     35    this.shadowRoot.innerHTML = `
     36      <style>
     37        div {
     38          width: 16px; height: 16px; background: red;
     39        }
     40      </style>
     41      <p><div part="icon"></div></p>
     42    `;
     43  }
     44 }
     45 customElements.define("display-el", DisplayEl);
     46 </script>