Category: Developer

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

Stencil component ใช้ JSX template syntax ในการกำหนดรูปแบบการแสดงผลที่จะถูก render ของ component  ซึ่งแต่ละ component จะมี render function ที่จะทำหน้าที่ return โครงสร้างของ component ที่จะเปลี่ยนเป็น DOM ตอน runtime เพื่อแสดงผลบนหน้าจอ

class MyComponent {
    render() {
       return (
          <div>
            <h1>Hello World</h1>
            <p>This is JSX!</p>
          </div>
       );
    }
}

จาก class Mycomponent ด้านบน render function จะ return div element ที่ภายในประกอบไปด้วย h1 และ p

Data Binding

เมื่อ component ต้องการที่จะ render ข้อมูลที่มีการเปลี่ยนแปลง dynamic data ทำได้โดยการ bindind ข้อมูลนั้นๆ โดยใช้ {variable}  (ซึ่งจะใกล้เคียงกับ ES6 template ที่ใช้ ${variable})

render() {
     return (
        <div>Hello {this.name}</div>
     )
}

Conditionals

เมื่อ component มีการแสดงผลที่ขึ้นอยู่กับเงื่อนไข สามารถใช้ JavaScript if/else statements ใน render function ดังเช่นตัวอย่างด้านล่างนี้ ถ้า this.name ไม่มีการกำหนดค่า จะแสดงผล “Hello, World”

render() {
    if (this.name) {
        return ( <div>Hello {this.name}</div> )
    } else {
        return ( <div>Hello, World</div> )
    }
}

หรือ จะเขียนในรูปแบบ inline conditionals ก็ได้เช่นกัน

render() { 
       return ( 
          <div> 
          {this.name 
               ? <p>Hello {this.name}</p> 
               : <p>Hello World</p> 
          } 
          </div> 
       ); 
}

Loops

ใน JSX สามารถใช้ array operators : map ในการทำงานแบบ loop  จากตัวอย่างด้านล่าง มี lists ของ todo object ใน this.Objects ซึ่ง map function ทำหน้าที่ loop ในแต่ละ todo object ใน this.Objects แล้วสร้าง new JSX sub tree และ add เข้าไปใน array ที่จะ return ออกจาก map function ซึ่งจะเพิ่มเข้าไปใน JSX tree ด้านนอกนั่นคือ div element

render() {
   return (
     <div>
       {this.todos.map((todo) =>
           <div>
             <div>{todo.taskName}</div>
             <div>{todo.isCompleted}</div>
           </div>
       )}
     </div>
  )
}

Handling User Input

Stencil สามารถใช้ native DOM events ได้ดังตัวอย่างด้านล่าง

export class MyComponent 
{ 
       handleClick(event: UIEvent) { 
            alert('Received the button click!'); 
       } 
       render() { 
           return ( 
              <button onClick={ (event: UIEvent) => this.handleClick(event)}>Click Me!               
              </button> 
           ); 
       } 
}

หรือจะเขียนในรูปแบบ  onClick={this.handleClick.bind(this)} ก็ได้เช่นกัน

  handleClick(event: UIEvent) {
    alert('Received the button click!');
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>Click Me!</button>
    );
  }

อ้างอิง : https://stenciljs.com/docs/templating-jsx