Based on the clock example I made a quick polyfill (not complete as light-DOM slots are not supported) #16

LionsAd · 2022-05-19T14:24:33Z

<!DOCTYPE html>

<shadowed-element>
    <template shadowroot=open>
        <!-- This is the SSR content -->
        <style>
          div {
            font-size:24pt;
            color: blue;
          }
        </style>
        <div>
          <span id=hour>12</span> : <span id=min>34</span> : <span id=sec>56</span>
        </div>
    </template>
</shadowed-element>

<script>
  customElements.define('shadowed-element', class extends HTMLElement {
    constructor() {
      super();
      let shadowRoot = null;
    
      try {
        const internals = this.attachInternals();
        if (internals.shadowRoot) {
          shadowRoot = internals.shadowRoot;
        }
      }
      catch (e) {
        
      }

      if (!shadowRoot) {
        var template = this.querySelector('template');
        shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.innerHTML = template.innerHTML;
      }
      this.hours = shadowRoot.querySelector('#hour');
      this.minutes = shadowRoot.querySelector('#min');
      this.seconds = shadowRoot.querySelector('#sec');
    }


    connectedCallback() {
      this.update();
      this.interval = setInterval(() => this.update(), 1000);
    }

    disconnectedCallback() {
      clearInterval(this.interval);
    }

    update() {
      const pad = v => {return String(v).padStart(2,'0')}
      const d = new Date();
      this.hours.textContent = pad(d.getHours());
      this.minutes.textContent = pad(d.getMinutes());
      this.seconds.textContent = pad(d.getSeconds());
    }
  });
</script>

That way the data does not need to be duplicated.

Live example here:

https://jsbin.com/joyavociza/edit?html,output

TechQuery · 2024-07-26T21:32:03Z

You can try the latest polyfill: https://github.com/EasyWebApp/declarative-shadow-dom-polyfill

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Based on the clock example I made a quick polyfill (not complete as light-DOM slots are not supported) #16

Based on the clock example I made a quick polyfill (not complete as light-DOM slots are not supported) #16

LionsAd commented May 19, 2022 •

edited

Loading

TechQuery commented Jul 26, 2024

Based on the clock example I made a quick polyfill (not complete as light-DOM slots are not supported) #16

Based on the clock example I made a quick polyfill (not complete as light-DOM slots are not supported) #16

Comments

LionsAd commented May 19, 2022 • edited Loading

TechQuery commented Jul 26, 2024

LionsAd commented May 19, 2022 •

edited

Loading