Some things I didn't know about custom elements

PublishedAugust 18, 2022

•2 min read•View as Markdown

Some things I didn't know about custom elements

Thomas Portelange

A Web Developer based in Belgium, specialized in PHP & JS development

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

A git diff with all changed and new unstaged files

I recently needed to collect all changes in one file for reporting purposes. Found this article: https://ratfactor.com/cards/git-diff-with-new-files In case you need something similar on Windows, here

Jul 27, 20261 min read

A git diff with all changed and new unstaged files

Writing a Zero-Dependency CSV and XLSX Reader/Writer

Some projects start with a grand plan. Others start because you just need to read a file without thinking too much about it. That was the case for spread-compat. I needed a common interface for CSV, X

Mar 6, 20265 min read

Writing a Zero-Dependency CSV and XLSX Reader/Writer

Media Queries Level 5 are awesome

With modern css, you can almost get rid of sass. But there is one last pain point : media queries. Not being able to use variables or an easy, common syntax for typical breakpoints is really annoying. That is, until you meet Media Queries Level 5. I’...

Oct 10, 20253 min read

Modern tooltips

This is a quick article to share this demo I just made. https://codepen.io/lekoalabe/pen/JoPNWpX

Dec 20, 20241 min read

Using Dialog elements today

Modals are typical UI elements for many web apps. There are countless packages dedicated to that specific features, each framework creating its own variation. Popular frameworks like Bootstrap also have custom code to deal with it. But all this feels...

Oct 29, 20243 min read

LeKoala Dev Blog

47 posts

Don't forget to define the custom element

If you have a class extending HTMLElement and you try to instantiate it without defining the custom element beforehand, it will not work.

class MyElement extends HTMLElement { ... } const el = new MyElement(); // => Uncaught (in promise) TypeError: Illegal constructor // Do this instead customElements.define('my-element', MyElement ); const el = new MyElement(); // :-) great!

Content within slots is rendered using light dom

While checking a routing library, I was surprised that even though it was using shadow dom, everything displayed inside the router was using global styles (eg: Bootstrap).

I was really surprised! Isn't the whole point of shadow dom to encapsulate the styles? It seems it's more complex than that and this article explains it very well.

Is there a difference in appending everything to a slot in a shadow dom or just appending nodes as usual without a shadow dom? I'm not sure!

class MyElement extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({ mode: 'open' }); const template = document.createElement('template'); template.innerHTML = '<slot></slot>'; const contentTemplate= document.createElement('template'); contentTemplate.innerHTML = 'This is a <button class="btn btn-primary">custom</button> element!'; shadow.appendChild(template.content.cloneNode(true)); this.appendChild(contentTemplate.content.cloneNode(true)); } }

whenDefined is really great

You don't always know when something is loaded or defined in Javascript. So let's say you load a lib somewhere but configure it somewhere else, it could be tricky to apply configuration because you don't always know if everything is loaded properly.

Custom elements solve this very nicely with the whenDefined callback that allows to run init or configure global options. For example...

customElements.whenDefined('my-element').then(async () => { MyElement.setOptions({ ... }); });

That's all for today :-)

Command Palette

Comments

More from this blog

Don't forget to define the custom element

Content within slots is rendered using light dom

whenDefined is really great