Postingan lainnya
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>
