HTML content tag | belajar <content> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML content tag. Tutorial dan panduan mengenai element <content>...</content> yang digunakan bersama attribute select didalam Shadow DOM. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <content>.

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.

Value: Selector

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.

Silahkan, lihat referensi mengenai HTML Global Attribute

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.

HTML 
<!-- 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

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo HTML content tag</title>
    <style>

    </style>
  </head>
  <body>
    <!-- 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>
  </body>
</html>
SHARE
Previous Article Next Article