VStack

Every Layout ⟩ Stack /⭐️

用哪個好？ <vstack-> 或 <i-vstack> ❓(這兩個都是合法的名字) 💾 replit ⟩ <vstack-> valid name?

version

// 0.0.5 + helpers

import {attr} from './helpers.mjs';

// VStack
export default class VStack extends HTMLElement {

    // this.render()
    render() {

        const {spacing, alignment} = this;
        const attrs = [spacing, alignment].filter(attr => !!attr);   // remove empty attributes

        // if no specific settings, use default values and return.
        if (attrs.length === 0) return;

        // style ID for this element
        const styleID = `VStack-${attrs.join('_')}`;

        // put vstack style ID in "data-xxx" attribute
        this.dataset.style = styleID;

        // if no such <style> with this ID, create it.
        if (!document.getElementById(styleID)) {

            // create <style>
            let style = document.createElement('style');
            style.id = styleID;

            // concate css rules
            const rules = [
                // spacing between items
                `${spacing ? `[data-style="${styleID}"] > * + :not(i-spacer) {margin-top: ${spacing};}` : ''}`,
                // stack alignmentment
                `${alignment ? `[data-style="${styleID}"] {align-items: ${alignment};}` : ''}`,
            ]
                .filter(rule => rule !== '')    // remove empty rules
                .join('\n');

            style.innerHTML = `${rules}`;
            document.head.appendChild(style);
        }
    }

    // -------------- getters/setters -------------------------

    // this.spacing (= '30px')
    get spacing() { return attr(this, 'spacing') }
    set spacing(val) { return attr(this, 'spacing', val) }

    // this.alignment (= 'flex-start' | 'center' | 'flex-end')
    get alignment() { return attr(this, 'alignment') }
    set alignment(val) { return attr(this, 'alignment', val) }

    // -------------- lifecycle callbacks -------------------------

    // ⭐ connected to document
    connectedCallback() {
        this.render();
    }

    // ⭐ observed attributes
    static get observedAttributes() {
        return ['spacing', 'alignment'];
    }

    // re-renders whenever one of attributes changes.
    attributeChangedCallback() {
        this.render();
    }
}

// ⭐️ register <vstack->
customElements.get('vstack-') || customElements.define('vstack-', VStack);

/* 0.1.0 - align-items: center -> stretch */

/* VStack */
vstack- {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* VStack 內非 spacer 的間隔 */
vstack- > * + :not(spacer-) {
  margin-top: var(--spacing);
}

/* 
    如果只有唯一一個 VStack，就讓它的高度為 100%，
    這樣裡面的 spacer 才能發生作用。

    ⭐️ 注意：
       此設定一定要「母物件」有「明確設定」height 才有效❗️
       母物件設定 min-height 沒有任何幫助喔❗️
 */
vstack-:only-child {
    height: 100%;
}

code lab

/* ⭐️ HStack */

.hstack {
  display: flex;
  flex-direction: row;
}

/* ⭐️ VStack */

.vstack {
  display: flex;
  flex-direction: column;
}

/* ⭐️ Spacer */

.hstack > .spacer {
  margin-left: auto;
  width: 0;
  border: none;
}

.vstack > .spacer {
  margin-top: auto;
  height: 0;
  border: none;
}

問題

<i-vstack align="right"  class="container">

當在 custom element <i-vstack> 中輸入屬性 align="right"，竟然會引發 browser 自動將它轉為：(🤔 align="..." 竟然對 custom element 也有效❓)

i-vstack[Attributes Style] {
    text-align: right;
}

導致內部的所有子元素都繼承到此 text-align 性質：

HTML align attribute supports col, colgroup, tbody, td, tfoot, th, thead, tr elements. Usage of align attribute for any other HTML elements is deprecated. You must use CSS for those. 📗 w3resource ⟩ HTML align attribute

解決方案：嘗試將 align="..." 改為 alignment="..." 看看。(結果 OK ✅)

Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry - 這問題常出現在 CodeSandbox 上。

解決方案：

// ⭐️ register new tag <i-vstack>
customElements.get('i-vstack') || 
customElements.define('i-vstack', VStack);

In order for a % value to work for height, the parent's height must be determined. 🗣 Why doesn't height: 100% working?
如果都是用百分比，則一路從 html ⟩ body ⟩ .... ⟩ 到自己的直屬母物件都要有明確設定 %，否則只要中間有一層斷掉也是沒用。

/*
   當我們設定 height: 100% 時，此設定並不會真正發生作用，
   除非它的母物件有「明確設定」height。
   ⭐️ 注意：設定母物件的 min-height 並沒有幫助❗️
 */
i-vstack:only-child {
    height: 100%;
}

PreviousSpacer NextHStack

Last updated 3 years ago

version

// 0.0.5 + helpers

import {attr} from './helpers.mjs';

// VStack
export default class VStack extends HTMLElement {

    // this.render()
    render() {

        const {spacing, alignment} = this;
        const attrs = [spacing, alignment].filter(attr => !!attr);   // remove empty attributes

        // if no specific settings, use default values and return.
        if (attrs.length === 0) return;

        // style ID for this element
        const styleID = `VStack-${attrs.join('_')}`;

        // put vstack style ID in "data-xxx" attribute
        this.dataset.style = styleID;

        // if no such <style> with this ID, create it.
        if (!document.getElementById(styleID)) {

            // create <style>
            let style = document.createElement('style');
            style.id = styleID;

            // concate css rules
            const rules = [
                // spacing between items
                `${spacing ? `[data-style="${styleID}"] > * + :not(i-spacer) {margin-top: ${spacing};}` : ''}`,
                // stack alignmentment
                `${alignment ? `[data-style="${styleID}"] {align-items: ${alignment};}` : ''}`,
            ]
                .filter(rule => rule !== '')    // remove empty rules
                .join('\n');

            style.innerHTML = `${rules}`;
            document.head.appendChild(style);
        }
    }

    // -------------- getters/setters -------------------------

    // this.spacing (= '30px')
    get spacing() { return attr(this, 'spacing') }
    set spacing(val) { return attr(this, 'spacing', val) }

    // this.alignment (= 'flex-start' | 'center' | 'flex-end')
    get alignment() { return attr(this, 'alignment') }
    set alignment(val) { return attr(this, 'alignment', val) }

    // -------------- lifecycle callbacks -------------------------

    // ⭐ connected to document
    connectedCallback() {
        this.render();
    }

    // ⭐ observed attributes
    static get observedAttributes() {
        return ['spacing', 'alignment'];
    }

    // re-renders whenever one of attributes changes.
    attributeChangedCallback() {
        this.render();
    }
}

// ⭐️ register <vstack->
customElements.get('vstack-') || customElements.define('vstack-', VStack);

/* 0.1.0 - align-items: center -> stretch */

/* VStack */
vstack- {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* VStack 內非 spacer 的間隔 */
vstack- > * + :not(spacer-) {
  margin-top: var(--spacing);
}

/* 
    如果只有唯一一個 VStack，就讓它的高度為 100%，
    這樣裡面的 spacer 才能發生作用。

    ⭐️ 注意：
       此設定一定要「母物件」有「明確設定」height 才有效❗️
       母物件設定 min-height 沒有任何幫助喔❗️
 */
vstack-:only-child {
    height: 100%;
}

code lab

/* ⭐️ HStack */

.hstack {
  display: flex;
  flex-direction: row;
}

/* ⭐️ VStack */

.vstack {
  display: flex;
  flex-direction: column;
}

/* ⭐️ Spacer */

.hstack > .spacer {
  margin-left: auto;
  width: 0;
  border: none;
}

.vstack > .spacer {
  margin-top: auto;
  height: 0;
  border: none;
}

問題

<i-vstack align="right"  class="container">

當在 custom element <i-vstack> 中輸入屬性 align="right"，竟然會引發 browser 自動將它轉為：(🤔 align="..." 竟然對 custom element 也有效❓)

i-vstack[Attributes Style] {
    text-align: right;
}

導致內部的所有子元素都繼承到此 text-align 性質：

解決方案：嘗試將 align="..." 改為 alignment="..." 看看。(結果 OK ✅)

Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry - 這問題常出現在 CodeSandbox 上。

解決方案：

// ⭐️ register new tag <i-vstack>
customElements.get('i-vstack') || 
customElements.define('i-vstack', VStack);

In order for a % value to work for height, the parent's height must be determined. 🗣 Why doesn't height: 100% working?
如果都是用百分比，則一路從 html ⟩ body ⟩ .... ⟩ 到自己的直屬母物件都要有明確設定 %，否則只要中間有一層斷掉也是沒用。

/*
   當我們設定 height: 100% 時，此設定並不會真正發生作用，
   除非它的母物件有「明確設定」height。
   ⭐️ 注意：設定母物件的 min-height 並沒有幫助❗️
 */
i-vstack:only-child {
    height: 100%;
}