appsdevpk/index.html

## index.html
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Remote Fetch Component</title>
	<style>
		.adp-remotefetch{
			position: relative
		}
		#loader{
			position:absolute;
			width:100%;
			height:100%;
			text-align:center;
			line-height:40%
		}
	</style>
</head>
<body>
	<div id="loader">Loading</div>
	<adp-remotefetch url="https://jobs.github.com/positions.json?description=javascript" params='{"page":1}' proxy="https://cors-anywhere.herokuapp.com/">
		<template>
			<ul>
				{{#each this}}
					<li>
						<h3>{{ title }}</h3>
						<p><img class="companylogo" src="{{ company_logo }}" alt="{{ title }}" /></p>
						<p><strong>Type :</strong> {{ type }}</p>
						<p><strong>Company :</strong> {{ company }}</p>
						<p><strong>Website :</strong> {{ company_url }}</p>
						<p><strong>Location :</strong> {{ location }}</p>
						<p><strong>Description :</strong> <br />{{{ description }}}</p>
						<a href="{{ how_to_apply }}">Apply for Job</a><br />
						<a href="{{ url }}" class="viewmore">View Detail</a><br />
					</li>
				{{/each}}
			</ul>
			<style>
				.companylogo{
					width:150px;
				}
			</style>
		</template>
	</adp-remotefetch>
	<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
	<script src="script.js"></script>
</body>
</html>

## script.js
class AdpRemoteFetch extends HTMLElement{
	constructor(){
		super();
		this.shadow = this.attachShadow({mode: 'open'});
		this.containerDiv = document.createElement('div');
		this.shadow.appendChild(this.containerDiv);
	}
	get url(){
		return this.getAttribute('url');
	}
	set url(val){
		if(val){
			this.setAttribute('url',val);
			this.updateContents();
		}
	}
	get params(){
		return this.getAttribute('params');
	}
	set params(val){
		if(val){
			this.setAttribute('params',val);
			this.updateContents();
		}
	}
	connectedCallback(){//one of the lifecycle callbacks
		this.updateContents();
	}
	disconnectedCallback(){
		console.log('Custom square element removed from page');
	}
	adoptedCallback(){
		console.log('Custom square element moved to new page');
	}
	updateContents(){
		const currElem = this;
		const remoteLink = currElem.getAttribute('url');
		const params = currElem.getAttribute('params');
		const proxyurl = currElem.hasAttribute('proxy') ? currElem.getAttribute('proxy') : '';
		var url = new URL(proxyurl + remoteLink);
		if(params!==''){
			url.search = new URLSearchParams(JSON.parse(params)).toString();
		}
		this.showLoader();
		fetch(url,{cache: "force-cache"})
		.then(response => response.json())
		.then(data => {
			const source = currElem.getElementsByTagName('template')[0].innerHTML;
			const template = Handlebars.compile(source);
			const html = template(data);
			let containerDiv1 = document.createElement('div');
			containerDiv1.innerHTML = html;
			this.shadow.innerHTML = html;
			this.hideLoader();
		});
	}
	showLoader(){
		document.getElementById('loader').style.display = 'block';
	}
	hideLoader(){
		document.getElementById('loader').style.display = 'none';
	}
}
customElements.define('adp-remotefetch',AdpRemoteFetch);
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Remote Fetch Component</title>
	<style>
	.adp-remotefetch{
	position: relative
	}
	#loader{
	position:absolute;
	width:100%;
	height:100%;
	text-align:center;
	line-height:40%
	}
	</style>
	</head>
	<body>
	<div id="loader">Loading</div>
	<adp-remotefetch url="https://jobs.github.com/positions.json?description=javascript" params='{"page":1}' proxy="https://cors-anywhere.herokuapp.com/">
	<template>
	<ul>
	{{#each this}}
	<li>
	<h3>{{ title }}</h3>
	<p><img class="companylogo" src="{{ company_logo }}" alt="{{ title }}" /></p>
	<p><strong>Type :</strong> {{ type }}</p>
	<p><strong>Company :</strong> {{ company }}</p>
	<p><strong>Website :</strong> {{ company_url }}</p>
	<p><strong>Location :</strong> {{ location }}</p>
	<p><strong>Description :</strong> <br />{{{ description }}}</p>
	<a href="{{ how_to_apply }}">Apply for Job</a><br />
	<a href="{{ url }}" class="viewmore">View Detail</a><br />
	</li>
	{{/each}}
	</ul>
	<style>
	.companylogo{
	width:150px;
	}
	</style>
	</template>
	</adp-remotefetch>
	<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
	<script src="script.js"></script>
	</body>
	</html>
	class AdpRemoteFetch extends HTMLElement{
	constructor(){
	super();
	this.shadow = this.attachShadow({mode: 'open'});
	this.containerDiv = document.createElement('div');
	this.shadow.appendChild(this.containerDiv);
	}
	get url(){
	return this.getAttribute('url');
	}
	set url(val){
	if(val){
	this.setAttribute('url',val);
	this.updateContents();
	}
	}
	get params(){
	return this.getAttribute('params');
	}
	set params(val){
	if(val){
	this.setAttribute('params',val);
	this.updateContents();
	}
	}
	connectedCallback(){//one of the lifecycle callbacks
	this.updateContents();
	}
	disconnectedCallback(){
	console.log('Custom square element removed from page');
	}
	adoptedCallback(){
	console.log('Custom square element moved to new page');
	}
	updateContents(){
	const currElem = this;
	const remoteLink = currElem.getAttribute('url');
	const params = currElem.getAttribute('params');
	const proxyurl = currElem.hasAttribute('proxy') ? currElem.getAttribute('proxy') : '';
	var url = new URL(proxyurl + remoteLink);
	if(params!==''){
	url.search = new URLSearchParams(JSON.parse(params)).toString();
	}
	this.showLoader();
	fetch(url,{cache: "force-cache"})
	.then(response => response.json())
	.then(data => {
	const source = currElem.getElementsByTagName('template')[0].innerHTML;
	const template = Handlebars.compile(source);
	const html = template(data);
	let containerDiv1 = document.createElement('div');
	containerDiv1.innerHTML = html;
	this.shadow.innerHTML = html;
	this.hideLoader();
	});
	}
	showLoader(){
	document.getElementById('loader').style.display = 'block';
	}
	hideLoader(){
	document.getElementById('loader').style.display = 'none';
	}
	}
	customElements.define('adp-remotefetch',AdpRemoteFetch);