Forem: Nitipit Nontasuwan

Shadow DOM "the right way" in 2024 - Isolation, not complication 🤷

Nitipit Nontasuwan — Tue, 16 Jan 2024 07:18:51 +0000

For many years, I've read about Shadow DOM in Web Component from many places then just wonder why the implementation is so complicated.

While I'm working on Adaptive Style Component Framework: Adapter. I found many complicated things when I tried to implement style with Shadow DOM encapsulation. That make me rethink again, is there any easier way to use Shadom DOM ?

To the solution

If you want to get into the solution right away, this is the idea codes (Not the ideal one but you can get the point). You can read the reason furthur below.



function isolate(element: HTMLElement, isolationElement: HTMLElement) {
  if (!isolationElement) {
    isolationElement = document.createElement('div');
    isolationElement.attachShadow({mode: 'open'});
  }
  element.parentElement.insertBefore(isolationElement, element);
  element.shadowRoot.append(element);
}

Code above will create div with shadowRoot and append the whole element inside the shadowRoot, make it isolated just in place. Then you can code your element as you do in Normal DOM

Next example shows an idea how to implement it in Web Component class



class Component extends HTMLElement {
  isolated(element: HTMLElement) {
    if (!element) {
      element = document.createElement('div');
      element.attachShadow({ mode: 'open' });
    }
      this.parentElement.insertBefore(element, this);
      element.shadowRoot.appendChild(this);
    }
  }
}

Why ?

Shadow DOM brings "Component Isolation" concept to Web Application. However, the way developers implements it so far is different from what I'm thinking recently.

Let's take a look at the code from https://web.dev/articles/shadowdom-v1



// Use custom elements API v1 to register a new HTML tag and define its JS behavior
// using an ES6 class. Every instance of <fancy-tab> will have this same prototype.
customElements.define('fancy-tabs', class extends HTMLElement {
    constructor() {
    super(); // always call super() first in the constructor.

    // Attach a shadow root to <fancy-tabs>.
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
        <style>#tabs { ... }</style> <!-- styles are scoped to fancy-tabs! -->
        <div id="tabs">...</div>
        <div id="panels">...</div>
    `;
    }
    ...
});

This is the default pattern introduced by many famous web component documentations. It's the easiest way to jump straight to use Shadow DOM in Web Component, but it cause many following complicatations.

It separates DOM access between Host and Shadow DOM
It separated CSS application from Host and Shadow DOM

This is where the complication start. When we use Shadom DOM like this in web component, we have to think from the start if the component will contain shadowRoot or not. Then it separate Web Component into 2 types, "Shadow" or "Light" DOM
Which also brings a lot of awkward way to implement component methods and CSS.

When you want to access child nodes from Shadow Host, you have to access shadowRoot. When you want to apply css on host node, you have to use :host {}. This add an extra layer to program or style component which doesn't exist in normal components.

Does it have to be like that ? On my second thought, I come up with another solution.

Let's use Shadow DOM in the right way ?
You can read my solution above again.

Adapter - Adaptive Style Web Component Framework

Nitipit Nontasuwan — Sun, 07 Jan 2024 18:41:12 +0000

Hi, recently I have created a new project call Adapter which bring CSS to the next Level with Web-Component. I'm very excited to share .
for more info: https://keenlycode.github.io/adapter/

Introduction

What is Adapter ?

Adapter is a JavaScript framework designed to seamlessly integrate
CSS-in-JS with Web Components. Setting it apart from other
CSS libraries, Adapter is framework which focus is on
Web Component Styling.

Despite its simplicity, Adapter unlocks endless possibilities
for enhancing UX/UI in web applications. While traditional CSS frameworks
have faced limitations, on the other hand, Adapter can implement features
such as encapsulation, inheritance, composition, event-interaction,
and other complex styling requirements which opens up new potential
for creating dynamic and feature-rich user interfaces.

Examples

OOP

import { Adapter } from '@devcapsule/adapter';

class FlexBox extends Adapter {
    static css = `
        display: flex;
        justify-content: center;
    `;
}

/** WrapFlexBox also inhertit styles from FlexBox */
class WrapFlexBox extends Flexbox {
    static css = `
        flex-wrap: wrap;
    `;
}

WrapFlexBox.define('el-wrap-flexbox');

This will produce CSS as

el-wrap-flexbox {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

Then, you can use them in html or create an instance by javascript

Javascript

// Create <el-flexbox> in OOP manner.
const flexBox = new FlexBox();
document.body.append(flexBox);

HTML

<el-wrap-flexbox></el-wrap-flexbox>

Variables and Functions

Javascript

import Color from 'color';

function bgColor(color) {
    return `
        background-color: ${color};
        color: ${Color(color).isDark() ? 'white' : 'black'};
    `.trim();
}

class RedFlexBox extends FlexBox {
    static css = `${bgColor('red')}`;
}

export { bgColor, RedFlexBox };

Variables / Functions / OOP / Modules , That's it !

CSS now is programmable with ES6 ! ... What else do we need ? 😉

What problem is the adapter trying to solve ?

One of the most common problems for CSS which is hard to implement
is Style Encapsulation and Inheritance, since we can't easily make sure that element styles
won't unintentionally be inherited or overridden from somewhere else.

Consider this situation where button style has been defined
in one of <style> tag

<style>
    div > button { background-color: red }
</style>

If we have a component somewhere which contains <button> without using
customElements

<div class="componentA">
    <div><button>Button</button></div>
</div>

In this situation, your components style might be overridden by
global <style> from somewhere if you don't make CSS selector
more specific like,

<style>
/* this won't work */
.componentA {
    div button { background-color: blue }
}

/* this work */
.componentA {
    div > button { background-color: blue }
}
</style>

This is just a simple example. Imagine when we have many elements
and more style properties; this could be a headache
and prone to causing errors in component styling,
or at least it prevents us from achieving a composed style
between elements/components or libraries.

Component Styling to save the world !

Web Component Styling can solve this problems, because

When you use customElements.define(), it will show errors if the custom element has already been defined somewhere else, allowing you to decide how to deal with it.
Defined custom elements have their own unique tags, preventing global styles from unintentionally overriding components and their elements. However, you still have full control of a component from global styles if desired, making it ideal for theming which Shadow DOM lacks this features.

Let's see how to implement CSS Styling in Adapter Component.

class ComponentA extends Adapter {
    /** CSS will be isolated in ComponentA
     * Moreover, we can write CSS for this component without worrying
     * about this component tagName.
     */
    static css = `div button { background-color: blue} `;
}

ComponentA.define('el-component-a');

HTML

<el-component-a>
    <div><button>Button</button></div>
</el-component-a>

CSS management is easy with

Nitipit Nontasuwan — Wed, 30 Nov 2022 11:19:29 +0000

I've coded CSS for more than 15 years. CSS in complex WebApp nowadays is getting messy. That's why many CSS methodologies have been invented so far such as OOCSS, BEM, SMACSS, Atomic CSS. However, each methodology still has it's own advantages and disadvantages to debate.

Although there're many methodologies to choose. I still feel pain to manage CSS which make me always think that there's something still missing. After thinking and researhing, I think I've found the conclusion that CSS is just a styling language. It lacks of Object Oriented features. That's why it's hard to maintain and scale.

What's so close to make CSS becomes like Object is OOCSS. However, CSS methodology alone can't help much. That's why I've created Adapter project to introduce a new concept which use Javascript and <web-component/> technology together with CSS . Start with simple APIs :

// Javascript
define('el-card', Card);
Card.tagStyle(`background-color: white;`);
Card.classStyle('lift', `
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%);
`);

const card_id_highlight = document.querySelector('#highlight');
card_id_highlight.addStyle(`font-size: 1.5rem;`);

<!-- HTML -->
<el-card id="highlight">
    Card content goes here.
</el-card>

<el-card class="lift">
    Lifted card.
</el-card>

I think that's a very interesting idea. With this implementation, I can use CSS in Object-Oriented space. import export variables function scope class module packaging .. that's a lot of features which can help to maintain and scale CSS.

The rest of this story is in Adapter project. You can take a look at Adapter : Adaptive Style Web Component . Hope that it can blow CSS pain away. ;)

Adwaita Icon Web v2.1.1

Nitipit Nontasuwan — Tue, 22 Jun 2021 10:10:36 +0000

Hi, just release Adwaita Icon Web v2.1.1
Update icons from Gnome 40, :)

Adwaita Icon for Website

Nitipit Nontasuwan — Sun, 29 Sep 2019 15:59:44 +0000

Just update Adwaita Icon for website using Adwaita-Icon-Theme for Gnome 3.34. Get it here https://github.com/nitipit/adwaita-icon-web

bits-ui.com : Simple and elegant UI Library

Nitipit Nontasuwan — Fri, 06 Sep 2019 16:24:34 +0000

Would like to share Web Components and CSS Library for building website.
bits-ui.com