MENU


Attaching ShadowDOM

(more info in 2.1.5 and 2.6.1)


RESETRUNFULL
This does away with repeatedly entering parts of the sentence. Notice how the first unnamed slot (aka. default slot, ie. the full name here) gets allocated the rest of the DOM tree appended together. Subsequent unnamed slots aren’t allocated.In addition to <div>, a few other HTML elements such as <span> and custom-defined elements can also be used to contain the data.

<!DOCTYPE html><html><head>
   <title>Templating and Shadow DOM</title>
   <style>
      div {display: inline;}
   </style></head><body>
   <div class="student">
      <div>Alex Foo</div>
      <div slot="height">169cm</div>
      <div slot="gender">male</div>
   </div>
   <div class="student">
      <div slot="gender">female</div>
      <div slot="height">172cm</div>
      <div>Katherine</div>
       <div slot="height">(to 175cm)</div>
         <div>Alice</div>
   </div>
   <template id="Harvard_student">
       <p>
         <span><slot></slot></span> is
          <span><slot name="height"></slot></span> tall,
         <span><slot name="gender"></slot></span>
         and from Harvard Univerity.
         <slot></slot>
      </p>
      <style>
         span {color:red;}
      </style>
   </template>
   <script>
      if('attachShadow' in
                                document.querySelector(".student")) {
         let h =
  document.
                     getElementById("Harvard_student").content;
         document.querySelectorAll(".student").
             forEach(record=>{
                record.attachShadow({mode:"open"}).
                    appendChild(h.cloneNode(true));
            });
      }
   </script></body></html>


RESETRUNFULL
<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>Shadow parts example</title>  <style>    tabbed-custom-element::part(tab) {      color: #0c0c0dcc;      border-bottom: transparent solid 2px;    }    tabbed-custom-element::part(tab):hover {      background-color: #0c0c0d19;      border-color: #0c0c0d33;    }    tabbed-custom-element::part(tab):hover:active {      background-color: #0c0c0d33;    }    tabbed-custom-element::part(tab):focus {      box-shadow:        0 0 0 1px #0a84ff inset,        0 0 0 1px #0a84ff,        0 0 0 4px rgba(10, 132, 255, 0.3);    }    tabbed-custom-element::part(active) {      color: #0060df;      border-color: #0a84ff !important;    }  </style></head><body>  <h1>Shadow part styling for tabbed custom element</h1>  <template id="tabbed-custom-element">    <style type="text/css">      *, ::before, ::after {        box-sizing: border-box;        padding: 1rem;      }      :host {        display: flex;      }    </style>    <div part="tab active">Tab 1</div>    <div part="tab">Tab 2</div>    <div part="tab">Tab 3</div>  </template>  <tabbed-custom-element></tabbed-custom-element><script>  let template = document.getElementById(                                               "tabbed-custom-element");  globalThis.customElements.define(template.id,                                              class extends HTMLElement {    constructor() {      super();      this.attachShadow({ mode: "open" });      this.shadowRoot.appendChild(template.content);      let tabs = [];      let children = this.shadowRoot.children;      for(let elem of children) {        if(elem.getAttribute('part')) {          tabs.push(elem);        }      }      tabs.forEach((tab) => {        tab.addEventListener('click', (e) => {          tabs.forEach((tab) => {            tab.part = 'tab';          })          e.target.part = 'tab active';        })        console.log(tab.part);      })    }  });</script></body></html>