Hyper Responsive Web Components

URL: https://www.trysmudford.com/blog/hyper-responsive-web-components/

So, this is the simplest web component to be made! Very helpful in understanding and for future reference and needs. I like them, and want to use them, it's just the javascript bits that make it difficult for me to understand completely. But, with this, it's very helpful.

class MyWebComponent extends HTMLElement {
    renderCSS = () => `<style>
        /* Component CSS */
    </style>`;

    connectedCallback() {
        // Opt into the Shadow DOM
        this.attachShadow({ mode: 'open' });

        // Create a wrapper for the component & add to the Shadow DOM
        const wrapper = document.createElement('div');
        wrapper.setAttribute('class', 'wrapper');
        this.shadowRoot.appendChild(wrapper);

        // Render the component's HTML
        wrapper.innerHTML = `
            ${this.renderCSS()}
            <!-- Component HTML -->
        `;
    }
}

customElements.define('my-web-component', MyWebComponent);

Really cool use of container query sizing:

They’re finally here and stable! Container queries brought along a new length unit: CQI. This unit is calculated as a proportion of the nearest named container; the element opted in with container-type: inline-size. In the same way that 1vi === 1% of the viewport, 1cqi === 1% of the container.

.wrapper {
    container-type: inline-size;

    --body-size: clamp(1rem, 0.9565rem + 0.2174vi, 1.125rem);
    --heading-size: clamp(1.5rem, 1.3261rem + 0.8696vi, 2rem);
    --item-spacing: clamp(0.5rem, 0.3261rem + 0.8696vi, 1rem);
}

@support (font-size: 1cqi) {
    .wrapper {
        --body-size: clamp(1rem, 0.9565rem + 0.2174cqi, 1.125rem);
        --heading-size: clamp(1.5rem, 1.3261rem + 0.8696cqi, 2rem);
        --item-spacing: clamp(0.5rem, 0.3261rem + 0.8696cqi, 1rem);
    }
}