VStack

Every Layout ⟩ Stack /⭐️

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

version

code lab

問題

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

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

HTML align attribute supports col, colgroup, tbody, td, tfoot, th, thead, tr elements. Usage of align

PreviousSpacer NextHStack

Last updated 3 years ago

Was this helpful?

// 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);