Stencil : Styling

by
Post Views: 232

Shadow DOM

Shadow DOM เป็น API ที่อยู่ใน browser ที่ให้ความสามารถในทำ DOM encapsulation และ style encapsulation โดย Shadow DOM จะแยก component ออกจากภายนอก ทำให้ไม่ต้องกังวลกับ scope ของ css หรือผลกระทบกับ component ภายนอก หรือ component ภายนอกจะกระทบกับ component ภายใน

ใน Stencil ค่า default การใช้งาน Shadow DOM ใน web component ที่สร้างด้วย Stencil จะถูกปิดอยู่  หากต้องการเปิดใช้งาน Shadow DOM ใน web component ต้องกำหนดค่า shadow param ใน component decorator ดังตัวอย่างด้านล่างนี้

@Component({
  tag: 'shadow-component',
  styleUrl: 'shadow-component.scss',
  shadow: true
})
export class ShadowComponent {

}

สิ่งจำเป็นเมื่อเปิดใช้งาน Shadow DOM

  • QuerySelector เมื่อต้องการ query element ที่อยู่ภายใน web component จะต้องใช้ this.el.shadowRoot.querySelector() เนื่องจาก DOM ภายใน web component อยู่ภายใน shadowRoot
  • Global Styles จะต้องใช้ CSS custom properties
  • css selector สำหรับ web component element คือ “:host”  selector

โดยทั่วไป จะเก็บ styles ไว้ภายไต้ ชื่อ tag ของ component นั้น

my-element {
  div {
    background: blue;
  }
}

ในกรณีของ Shadow DOM  อยู่ภายใต้ tag :host

:host {
  div {
    background: blue;
  }
}

Scoped CSS

สำหรับ browser ที่ไม่สนับสนุน Shadow DOM, web component ที่สร้างโดย Stencil จะกลับไปใช้ scoped CSS แทนที่จะ load Shadow DOM polyfill ที่มีขนาดใหญ่  Scoped CSS จะทำการกำหนดขอบเขต CSS ให้กับ element โดยอัตโนมัตตอน runtime

CSS Variables

CSS Variables เหมือนกับ Sass Variables แต่ต่างกันตรงที่ CSS Variables รวมอยู่ใน browser โดยที่ CSS Variables ให้ความสามารถในการกำหนด CSS properties ที่ใช้ได้ภายใน app  ตัวอย่างการใช้งานที่พบบ่อยคือ การกำหนดสี (color) ถ้ามีสีหลักที่ต้องการใช้ร่วมกันทั้ง app แทนที่จะกำหนดสีนั้นๆในแต่ละที่ที่ใช้งาน ก็จะสร้าง variable ขึ้นมาและใช้ variable นั้นในทุกๆที่ที่ต้องการ ซึ่งถ้าต้องการเปลี่ยนสี ก็สามารถเปลี่ยนที่ variable ที่เดียว

การใช้งาน CSS Variables ใน Stencil

สร้าง file : variables.css ที่ใช้เก็บ CSS Variabless ใน “src/global/” directory  และเพิ่ม config globalStyle: ‘src/global/variables.css’  ใน stencil.config.js

ตัวอย่าง การกำหนด CSS Variable ใน src/global/variables.css

:root {
  --app-primary-color: #488aff;
}

จากตัวอย่างด้านบน สร้าง CSS Variable ชื่อ –app-primary-color ที่เก็บค่าสี #488aff อยู่ภายใต้ :root selector (:root selector คือ CSS pseudo selector ที่หมายถึง root element ของ app) การใช้ CSS Variable ที่กำหนดไว้ทำได้ดังนี้

h1 {
  color: var(--app-primary-color)
}

เป็นการกำหนดสี ที่เก็บไว้ใน CSS Variable –app-primary-color ให้กับ h1 element

 

อ้างอิง : https://stenciljs.com/docs/styling