I am learning about templates, custom elements, shadow DOM, etc. Here, I like to utilize Swiper lib to create custom element that i can compose as i wish in the future. It works when everything is one file as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<template id="TmplCoverflowSwiper">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<style>
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
}
.swiper-slide img {
display: block;
width: 100%;
}
</style>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-4.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-5.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-6.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-7.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-8.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-9.jpg" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<script>
(async () => {
// <!-- Swiper JS -->
const { Swiper } = await import("https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.mjs");
console.log('swiper-bundle imported...')
// <!-- Initialize Swiper -->
var swiper = new Swiper(".mySwiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
pagination: {
el: ".swiper-pagination",
},
});
console.log('swiper initiated...');
}
)();
</script>
</template>
<script>
class CoverflowSwiper extends HTMLElement {
constructor() {
super(); // always call super() first
}
/** Custom Component Reactions **/
connectedCallback() {
console.log("Coverflow-Swiper connected to page");
//set initial state of visiable
this.visible = this.hasAttribute('visible');
//make deep copy of the template and import into the current document
let tmpl = document.querySelector("#TmplCoverflowSwiper");
let newNode = document.importNode(tmpl.content, true);
// document.getElementById("PCCoverflowSwiper").appendChild(newNode);
this.appendChild(newNode);
}
}
//link custom element w/ JS class
customElements.define("pc-coverflow-swiper", CoverflowSwiper);
</script>
</head>
<body>
<h1>Making Swiper Web Component</h1>
<pc-coverflow-swiper id="PCCoverflowSwiper">
</pc-coverflow-swiper>
</body>
</html>However, i like to keep things separate and when i move out all the code pertained to my custom element into a separate file that is imported in the main file, suddenly the JS script part of the template scope won’t execute and i cann’t seem to understand why it is so, just by removing into separate file?
The main file containing custom element tag while stripped out the rest into file tmpl-swiper.html and imported here in the head here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<!-- include the polyfill for web components. This must precede imports -->
<script src="../polyfills/webcomponents-lite.js"></script>
<!-- import our template from an external file -->
<link rel="import" href="tmpl-swiper.html" id="tmplCoverflow">
</head>
<body>
<h1>Making Swiper Web Component</h1>
<pc-coverflow-swiper id="PCCoverflowSwiper">
</pc-coverflow-swiper>
</body>
</html>Here is the imported template file taken out from the main file into separate file all pertained to the custom element with name tmpl-swiper.html:
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
}
.swiper-slide img {
display: block;
width: 100%;
}
</style>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-4.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-5.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-6.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-7.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-8.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-9.jpg" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<script>
(async () => {
// <!-- Swiper JS -->
const { Swiper } = await import("https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.mjs");
console.log('swiper-bundle imported...')
// <!-- Initialize Swiper -->
var swiper = new Swiper(".mySwiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
pagination: {
el: ".swiper-pagination",
},
});
console.log('swiper initiated...');
}
)();
</script>
(function() {
class CoverflowSwiper extends HTMLElement {
constructor() {
super(); // always call super() first
}
/** Custom Component Reactions **/
connectedCallback() {
console.log("Coverflow-Swiper connected to page");
//set initial state of visiable
this.visible = this.hasAttribute('visible');
//make deep copy of the template and import into the current document
let tmpl = document.querySelector("#TmplCoverflowSwiper");
let newNode = document.importNode(tmpl.content, true);
// document.getElementById("PCCoverflowSwiper").appendChild(newNode);
this.appendChild(newNode);
}
}
//link custom element w/ JS class
customElements.define("pc-coverflow-swiper", CoverflowSwiper);
// automatically add the template
// to the document that is importing this file so it can be used.
// ownerDocument references this component document being imported
var thisImportDoc = document.currentScript.ownerDocument;
// Get the template from this file, clone it,
// and append it to the importing document.
var tmplNode = thisImportDoc.querySelector('#TmplCoverflowSwiper');
// the "document" keyword here references the "main" document
// (the one that's importing this HTML file)
document.body.appendChild(tmplNode.cloneNode(true));
})();
It imports the file, attaches the template, etc, however. the JS code within the Template tag isn’t executed and i can’t seem to understand the reason. Any help much appriciated. thank you
