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
- 85