Dalam pengembangan web modern, kita sering menghadapi issue bagaimana mengelola kompleksitas dan mencegah konflik style antar komponen.

Salah satu solusi yang kini mungkin masih populer adalah penggunaan Shadow DOM. Di artikel ini, saya akan membahas apa itu Shadow Root, kenapa itu penting, sejarahnya, dan cara mengimplementasikannya dalam aplikasi ReactJS.

Apa Itu Shadow DOM?

Shadow DOM adalah bagian dari Web Components yang memungkinkan kita membuat DOM terpisah dari DOM utama.

Dengan Shadow DOM, kita bisa mengenkapsulasi style dan behaviour komponen, sehingga menghindari konflik dengan elemen lain di halaman. Ini sangat berguna saat kita ingin membuat komponen yang dapat digunakan kembali dan tetap tampil konsisten.

Sejarah Shadow DOM

Shadow DOM pertama kali diperkenalkan oleh Google sebagai bagian dari spesifikasi Web Components. Diskusi tentang konsep ini mulai muncul sekitar tahun 2012. Shadow DOM dirancang untuk meningkatkan modularitas dan reusabilitas komponen web.

Pada tahun 2015, Shadow DOM resmi diadopsi dan mulai didukung oleh browser-browser modern seperti Chrome, Firefox, dan Safari. Sejak saat itu, Shadow DOM menjadi elemen penting dalam web development, memudahkan developer untuk menciptakan UI yang lebih clean dan reusable.

Kenapa Shadow DOM Penting?

1. Encapsulate: Shadow DOM memberi encapsulation yang lebih baik antar komponen. Ini sangat penting untuk menghindari masalah CSS yang sering terjadi ketika beberapa komponen berbagi project yang sama.
2. Reusable: Dengan menggunakan Shadow DOM, kita bisa membuat komponen yang dapat digunakan kembali di berbagai project tanpa khawatir tentang styling atau overlapping CSS.
3. Maintainable: Kita bisa melakukan perubahan pada satu komponen tanpa khawatir berdapak pada komponen lain.

Contoh Praktis Penggunaan Shadow DOM di ReactJS

Berikut adalah implementasi Shadow DOM dalam aplikasi React menggunakan library react-shadow-root. Kita akan membuat komponen sederhana yang menggunakan Shadow DOM untuk menampilkan tombol dengan style yang terpisah.

Langkah 1: Membuat Komponen Shadow DOM

Selanjutnya, saya akan membuat file baru bernama ShadowButton.js.

import React from 'react';
import { ReactShadowRoot } from 'react-shadow-root';

const ShadowButton = () => {
    return (
        <ReactShadowRoot>
            <style>
                {`
                    button {
                        background-color: #6200ea;
                        color: white;
                        border: none;
                        padding: 10px 20px;
                        border-radius: 5px;
                        cursor: pointer;
                        font-size: 16px;
                    }
                    button:hover {
                        background-color: #3700b3;
                    }
                `}
            </style>
            <button>Click Me!</button>
        </ReactShadowRoot>
    );
};

export default ShadowButton;

Langkah 2: Penggunaan Umum

Sekarang, kita bisa menggunakan komponen ShadowButton ini di komponen lain dalam project.

import React from 'react';
import ShadowButton from './ShadowButton';

const App = () => {
    return (
        <div>
            <h1>Sample of Shadow DOM</h1>
            <ShadowButton />
        </div>
    );
};

export default App;

Alternatif untuk Shadow DOM

Meskipun Shadow DOM menawarkan banyak benefit, ada juga alternatif lain yang bisa digunakan untuk menangani encapsulation dalam pengembangan web, yaitu CSS Modules. CSS Modules memungkinkan kita untuk menulis CSS yang scoped secara otomatis ke komponen tertentu, sehingga menghindari konflik gaya/style. Dengan menggunakan CSS Modules, Anda bisa menjaga styling tetap terpisah tanpa perlu menggunakan Shadow DOM.

Saya akan membahas lebih dalam tentang CSS Modules dan bagaimana mengimplementasikannya dalam aplikasi React pada artikel selanjutnya. Terima kasih. Salam sehat!