VStack
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);
code lab
問題
Last updated