Bare metal Web Components

Welcome!

  • What would happen if you actively chose to not rely on abstractions like frameworks, libraries, build chains, transpilers and whatnot for your component-based frontend architectures? your web applications? your web pages? or even your design systems?
  • Let's talk for a bit about what is available "under the hood" in our modern browsers from a "pure vanilla" web standards perspective.
  • Hi - I'm Åke Järvklo , and I am an evergreen developer / old web dog. Well sort of :)
    and I am a consultant here at Webstep
  • ... and I hope for your collaboration (in a quiz) shortly

Follow me back to the basics

DX? DX!

  • Well - it's up to you sir - what's your preference?
  • "Then you simply" ... (been there, done that)
  • And what kind of "Lego bricks" are we actually talking about BTW?
  • Lets keep it really simple and look at some of what is available in our browsers when starting from an empty HTML page

So - Basics

Standards pop quiz - elements, tags, attributes and basic behaviour

Some final words

But isn't using a custom element expressed as <magic-gizmo> /> impossible?

  • Well, actually...
    There is this nerdy "party trick" that proves that it's doable.
  • And it works since application/xhtml+xml is still a thing in HTML5 (and browsers still ask for that MIME-type)
  • But using text/html (like the rest of the web)? - it will not do what you probably intended

Custom elements

Use case: Rapid prototyping in code

Css and scoping

<style scoped> is not a platform thing!

  • That proposal was dropped a long time ago
  • However...
  • https://chriscoyier.net/2023/10/19/style-scoped/
  • Until more CSS goodness gets available - knoweth thy CSS Cascade!
  • ... or consider using a preprocessor or styling framework if you want (or need) to stay out of the shadow DOM

Light Dom and the APIs

  • Kind of sounds like a pop group from the swinging sixties doesn't it?
  • Let's see

Autonomous and customized custom elements

  • Autonomous custom elements extends from HTMLElement (v1)
  • ... and is widely implemented/available
  • There's also customized custom elements (v2) that extends the functionality of other standard elements As described on Mdn
  • v1 vs v2 (v2 was dropped and targeted for exclusion, but may be revived again)
  • ... so perhaps there's hope for the future? web-components-at-tpac-2023 )

Life cycle callbacks and stuff

But wait - doesn't this start to feel very similar to micro frontend patterns?

We call this technique micro frontends which we define as:

"An architectural style where independently deliverable frontend applications are composed into a greater whole"

Reactivity via observed attributes

The incrementing button sample

Templating Part 2 - slots and stuff in the Shadow DOM

Slots and stuff

Slots - Just how closed is the shadow DOM?

Scroedingers box?

  • Styling might (still) be a bit complex
  • Scoping style is probably an issue
  • Slots are light sensitive
  • CSS pseudo selectors (current and future)
  • CSS variables in the shadow
  • CSS parts and all the rest of the goodies

The complexity of constructing accessible form elements in the dark

Simply the best?

  • So many possibilities - again!
  • Tech in browsers is evolving - and fast
  • For me - it is a great time to be curious and keep learning new tricks
  • For you?
  • Well - it's up to you, what's your preference?
  • I hope I inspired you to spend some time to maybe reflect over if you're about to reinvent a wheel (or use a reinvented and perhaps overly complex view of what Lego bricks are to build one) the next time you "pick your poison" for a frontend project
  • ... regardless of whatever a "wheel" actually is to you and to your your team, in your particular project, and regardless how you feel about Lego as a metaphore in general
  • There's always more than one way...
  • ... always will be most likely ...
  • ... and the debate around certain takes on web components and frameworks is very much alive right now as exemplified here
  • The web component future seems bright... :)
  • Stay curious!

Resources

Links