Deskripsi
Penjelasan HTML content

HTML <content> element digunakan untuk menyisipkan konten (isi, baik berupa teks maupun lainnya) didalam Shadow DOM.

<content> element tidak digunakan sebagaimana biasanya, seperti HTML element lainnya. Ia digunakan bersamaan dengan Web Component. Oleh karenanya, untuk menggunakan element ini dan agar kode berjalan dengan baik, maka browser yang digunakan harus mendukung (support) Web Components.

  Ketahuilah!
  • Web Components adalah teknologi web secara terbuka yang sudah tertanam dan menjadi bagian dari browser sehingga tidak memerlukan library lain, seperti jQuery dan Dojo.

  • Shadow DOM merujuk pada kemampuan browser dalam me-render sebuah dokumen untuk menyertakan subtree dari DOM element, tetapi bukan didalam DOM tree dari dokumen utama.

Attributes
Atribut HTML Tag <content>

select

Menentukkan selector (sama seperti CSS selector) yang ingin disisipkan kontennya. Jika lebih dari satu, maka gunakan tanda koma (,) sebagai pemisah dari beberapa selectors yang dipilih.


Global Attributes
Atribut Secara Global (Keseluruhan)

<content> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Example
Contoh HTML <content> element

Pada contoh dibawah ini, konten dari <h1> yaitu "Time is Monkey" jelas salah, bukan Monkey (Monyet) tapi Money (Uang), sehingga menjadi "Time is Money" dan kita ingin merubah konten tersebut dengan script.

<!-- awalnya konten seperti ini (salah): -->
  <div>
    <h1>Time is Monkey</h1>
    <p>Waktu adalah Uang</p>
  </div>

  <script>
  // Tentukkan <div> diatas yang mau diedit.
  var ubahTulisan = document.querySelector('div');
  // Membuat sebuah shadow DOM pada <div> diatas
  var sumberBayangan = ubahTulisan.createShadowRoot();
  // <h1> diubah menjadi <h2>, begitu juga konten/isi-nya
  // Mengambil konten dari <p> element
  sumberBayangan.innerHTML =
   '<h2>Time is Money</h2> <content select="p"></content>';
  </script>

Dari contoh diatas, didalam element <div> (baris 2-5) terdapat element <h1> , kemudian diganti menjadi <h2> (lihat baris 15) dengan konten yang benar (Time is Money) ditambah dengan konten yang dipilih adalah element <p> (Waktu adalah Uang), sehingga hasilnya bisa dilihat pada Code Editor dibawah ini.

Contoh Lengkap
Demo dengan Source Code Editor

Demo Editor
Demo HTML <content>
Code Editor