Box
基本上不是作為排版的元件，但具有背景、邊框等。
Layout ⟩ Dark Theme
box.mjs 更改樣式的策略與 vstack.mjs 不同。
box.mjs 利用 setters 將樣式直接寫到個別的 <box> 樣式 (this.style) 中，因此無法共用。
vstack.mjs 則是間接將客製化的 <style> 樣式寫到 <head> 中，並同時將此 <style> 的專有 ID 寫到 <vstack> 的 "data-style" 屬性中，希望能共用這個 <style>。
source code
// 0.0.9 - Box: remove render(), use setters instead.
import {attr} from './helpers.mjs';
/**
* Box
* ---
* <box- padding="" border="" background="" color="" dark>
*/
export default class Box extends HTMLElement {
// ⭐ observed attributes
static get observedAttributes() {
return [
'padding', 'border', 'color', 'background', 'dark'
];
}
// re-renders whenever one of attributes changes.
attributeChangedCallback(attr, oldValue, newValue) {
// ⭐️ 更新：全部透過 setter 處理就好。
this[attr] = this[attr];
}
// -------------- ⭐️ getters/setters ------------------
// this.padding
get padding() { return attr(this, 'padding') }
set padding(val) {
this.style.padding = val;
return attr(this, 'padding', val)
}
// this.border
get border() { return attr(this, 'border') }
set border(val) {
this.style.border = val;
return attr(this, 'border', val)
}
// this.color
get color() { return attr(this, 'color') }
set color(val) {
this.style.color = val;
return attr(this, 'color', val)
}
// this.background
get background() { return attr(this, 'background') }
set background(val) {
this.style.background = val;
return attr(this, 'background', val)
}
// this.dark
get dark() { return this.hasAttribute('dark') }
set dark(val) {
this.classList.toggle('dark', val);
return attr(this, 'dark', val);
}
}
// ⭐️ register <box->
customElements.get('box-') ||
customElements.define('box-', Box);codepen ⟩ measure
codesandbox ⟩ box (0.0.5)
replit ⟩
this[prop] = this[prop] ? - 讀取屬性並強迫再設定一次屬性❗️
refactor Box - remove render(), use attributeChangedCallback() instead
Last updated
Was this helpful?