Custom Elements without ShadowDOM

A better way to manage lifecycle

Alex Riviere

Senior Vue Developer at Nexcor Technologies

@fimion@notacult.social

A Brief History

  • Started Web Development in early 2000s
  • Leaned into XHTML, CSS, and PHP 
  • Hated JavaScript with a fiery burning passion

JavaScript 1.2

  • Regular Expressions
  • the switch statement
  • the delete operator

A Brief History

  • Took an 11 year detour as a Theatre Technician
  • First professional web dev job was in 2016
  • Had a year long crash course in Javascript and jQuery

Discovered Vue and never looked back

var thing = document.getElementById('thing');

thing.onclick = function(event){
	// do stuff on click
}
<html>
  <body>
    <script>
      var thing = document.getElementById('thing');

      thing.onclick = function(event){
        window.alert("Hello World!");
      }
    </script>

    <input id="thing" type="button" value="Click Me!">
  </body>
</html>
Uncaught TypeError: Cannot set properties of null (setting 'onclick')
<html>
  <body>
    <input id="thing" type="button" value="Click Me!">
    
    <script>
      var thing = document.getElementById('thing');

      thing.onclick = function(event){
        window.alert("Hello World!");
      }
    </script>
  </body>
</html>
<html>
  <body>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      $(document).ready(function(){
        $("#thing").on('click',function(e){
          window.alert('Hello World!')
        })
      });
    </script>
    <input id="thing" type="button" value="Click Me!">
  </body>
</html>

👍

<html>
  <body>
    <div id="app">
      <input @click="handleClick" type="button" value="Click Me!">
    </div>
    <script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script>
    <script>
      new Vue({
        methods:{
          handleClick(){
            window.alert("Hello World")
          }
        }
      }).$mount("#app");
    </script>
  </body>
</html>

Pros

  • Native browser feature
  • Encapsulates styles and custom DOM with ShadowDOM
  • Gives you lifecycle hooks

 

Cons

  • Encapsulates styles and custom DOM with ShadowDOM
  • Doesn't give you a way to manage state
  • Doesn't give you ENOUGH lifecycle hooks

Custom Elements

Many people are Frustrated

 

 

$(document).ready(function(){});

<html>
  <body>
    <script>
    customElements.define("hello-world", class extends HTMLElement {
      connectedCallback(){
        this.querySelectorAll("button").forEach((el)=>{
          el.addEventListener("click", ()=>{
            window.alert("Hello World!");
          })
        })
      }
    })
    </script>
    <hello-world>
      <button>
        Click Me!    
      </button>
    </hello-world>
  </body>
</html>

Light DOM

ShadowDOM

Light DOM Examples

<ul>
  <li>
  	<a href="https://example.com/really-big-image">
    	<img src="https://example.com/thumbnail-image">
    </a>
  </li>
  <li>
  	<a href="https://example.com/really-big-image-2">
    	<img src="https://example.com/thumbnail-image-2">
    </a>
  </li>
</ul>
<light-box>
  <ul>
    <li>
      <a href="https://example.com/really-big-image">
          <img src="https://example.com/thumbnail-image">
      </a>
    </li>
    <li>
      <a href="https://example.com/really-big-image-2">
          <img src="https://example.com/thumbnail-image-2">
      </a>
    </li>
  </ul>
</light-box>

Use custom elements!

Thank you

  • Alex Riviere
  • https://alex.party
  • https://slides.com/fimion/custom-elements-2024

 

Custom Elements without ShadowDOM

By Alex Riviere

Custom Elements without ShadowDOM

  • 117

More from Alex Riviere