วิธีระบุให้สไตล์ใช้กับเฉพาะองค์ประกอบพาเรนต์และชิลด์ใน HTML

แอตทริบิวต์ scoped ของแท็ก <style> ใช้เพื่อจำกัดขอบเขตของ CSS ให้ใช้กับเฉพาะองค์ประกอบพาเรนต์ (parent element) และชิลด์ (child elements) ของมันเท่านั้น ไม่กระทบต่อส่วนอื่นของหน้าเว็บ

ตัวอย่างการใช้งาน (สำหรับการศึกษา)

<!DOCTYPE html>
<html>
<head>
  <style>
    h2 { color: yellow; }
  </style>
</head>
<body>
  <div>
    <style scoped>
      h2 { color: grey; }
    </style>
    <h2>หัวข้อสีเทา (ได้รับผลจาก scoped style)</h2>
  </div>
  <h2>หัวข้อสีเหลือง (ได้รับผลจาก global style)</h2>
</body>
</html>

ทางเลือกในปัจจุบัน

แทนที่จะใช้ scoped ควรพิจารณาวิธีต่อไปนี้:

• CSS Modules - ใช้ชื่อคลาสที่ไม่ซ้ำกันอัตโนมัติ
• Shadow DOM - สร้าง DOM แยกต่างหากที่ CSS ไม่รั่วไหลออกไป
• CSS-in-JS - เขียน CSS ภายใน JavaScript (เช่น styled-components, emotion)
• BEM methodology - การตั้งชื่อคลาสที่มีโครงสร้างชัดเจน

สรุป

แม้ scoped จะเป็นแนวคิดที่น่าสนใจ แต่ในทางปฏิบัติแล้วควรใช้เทคนิคสมัยใหม่ที่ได้รับการสนับสนุนอย่างกว้างขวางและมีประสิทธิภาพมากกว่า