My demo component

6.12.2023

Web components

index.html Raw #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

	<!--
	https://jsbin.com/tupofihode/1/edit?html,css,js,output
	-->
	       <pan-kokot name="Ondrej Stanček" skills="Umí to tavit s HTP stejně jako s V6, odborník na CMS modul parametry">
	       Kdo nemá plyn na podlaze nikdy nejedl Vindalo
	       </pan-kokot>

	
</body>
</html>

index.js Raw #

const template = document.createElement('template');
template.innerHTML = `
    <style>
        :host {
            border: 2px solid gray;
            padding: 1rem;
            display: block;
            width: 400px;

        }
        h2 {
            color: tomato;
            font-size: 2rem;
        }
		
		img {
		display: block;
		margin-bottom: 1.22rem;
		border: 2px solid tomato;
}
	div {
	border-top: 2px solid black;
	margin-top: 1rem;
	padding-top: 0.38rem;
}

	
        slot {
            font-weight: bold;
			
        }
		div {
background: pink;
margin-bottom: 0.3rem;
}
    </style>

    <h2></h2>
    <img />
	Dovednosti: <span></span>
	<div>Co nám řekneš o sobě?</div>
	<slot></slot>
 
`;

class PanKokot extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.appendChild(template.content.cloneNode(true));
    }

    static get observedAttributes() {
        return ['name'];
    }

    connectedCallback() {
        this.shadowRoot.querySelector('h2').innerText = this.name;
        this.shadowRoot.querySelector('img').src = 'https://i.pravatar.cc/150?u=' + this.name;
		this.shadowRoot.querySelector('span').innerText = this.getAttribute('skills').toString()
    }

    get name() {
        return this.getAttribute('name');
    }

    set heading(value) {
        this.setAttribute('name', value);
    }
}

window.customElements.define('pan-kokot', PanKokot);