Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Custom web components
Hallo!😁
Disini saya baru saja melihat tutorial untuk membuat custom components dengan javascript,
Kode [ index.html ] :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic Web Component</title>
</head>
<body>
<my-custom-component></my-custom-component>
<template id="ElementCustom">
<style>
h1{ color:blue; }
</style>
<h1>This is from Custom Component</h1>
</template>
<script type="text/javascript">
class MyCustomComponent extends HTMLElement{
constructor() {
// Always call this method in the constructor
super();
/** Get Object template tag via DOM who define
* by id 'Element Custom'
* you can also use function getEmelentById()
*/
let template = document.querySelector('#ElementCustom')
// Clone content inside template tag
let templateHTML = template.content.cloneNode(true);
// Initialize a Shadow DOM
let shadowdom = this.attachShadow({mode:'open'});
// Attach value of Template content into Shadow DOM
shadowdom.appendChild(templateHTML)
}
}
customElements.define("my-custom-component",MyCustomComponent)
</script>
</body>
</html>
Nah, pas saya coba run kode itu di browser dan berhasil memanggil custom components itu :
<my-custom-component></my-custom-component>
Dan muncul di browser tulisan " h1 " yang saya masukkan di dalam tag template.
ketika saya mau masukan bagian [ components.html ] :
<template id="ElementCustom">
<style>
h1{ color:blue; }
</style>
<h1>This is from Custom Component</h1>
</template>
dalam file terpisah,
nama filenya adalah :
components.html
dan saya import di index.html itu,
seperti ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic Web Component</title>
<link rel="import" href="components.html">
</head>
<body>
<my-custom-component></my-custom-component>
<script type="text/javascript">
class MyCustomComponent extends HTMLElement{
constructor() {
// Always call this method in the constructor
super();
/** Get Object template tag via DOM who define
* by id 'Element Custom'
* you can also use function getEmelentById()
*/
let template = document.querySelector('#ElementCustom')
// Clone content inside template tag
let templateHTML = template.content.cloneNode(true);
// Initialize a Shadow DOM
let shadowdom = this.attachShadow({mode:'open'});
// Attach value of Template content into Shadow DOM
shadowdom.appendChild(templateHTML)
}
}
customElements.define("my-custom-component",MyCustomComponent)
</script>
</body>
</html>
ketika saya run kembali di browser, hasil pagenya kosong "tidak ada apa² yang muncul di page itu, dan tidak ada error juga"
Hmm🤔, kira" letak kesalahannya dimana yaa?
Apakah file components.html itu tidak bisa di import?
Semoga jelas!
1 Jawaban:
<div><a href="https://caniuse.com/?search=html%20import">Html Import</a> sudah tidak disupport lagi.<br>Bisa manfaatkan <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">ES Module</a> atau tunggu proposal <a href="https://www.chromestatus.com/feature/4854408103854080">HTML Module</a>.<br>Atau kalau mau mirip-mirip bisa pakai <a href="https://github.com/polight/lego">Lego Web Component</a>.</div>
