Last active
December 12, 2020 15:12
-
-
Save abdullahoguk/cbd79e879f988ee69a79bdd6a07199f3 to your computer and use it in GitHub Desktop.
Web Componenets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const template = document.createElement("template"); | |
template.innerHTML = ` | |
<style> | |
:host{ | |
--light: #b0ade0; | |
--main: #36308aff; | |
--dark: #686778ff; | |
--gr1:linear-gradient(90deg, var(--darker), var(--main)); | |
font-family: 'Changa', sans-serif; | |
display:block; | |
color:var(--main); | |
} | |
</style> | |
<h5 class = "title"> </h5> | |
`; | |
class MyComponent extends HTMLElement { | |
//runs when element created | |
constructor() { | |
super(); | |
//add a font to root document | |
document.head.innerHTML += `<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Changa:wght@300;400;600;800&display=swap" rel="stylesheet">`; | |
// Create shadow dom and append content via template | |
this.attachShadow({ mode: "open" }); | |
this.shadowRoot.appendChild(template.content.cloneNode(true)); | |
this.shadowRoot.querySelector(".title").innerHTML = "My Custom Element" ; | |
this.myFunc = this.myFunc.bind(this); | |
} | |
// runs when element added to DOM | |
connectedCallback() { | |
} | |
// runs when element removed from DOM | |
disconnectedCallback() { | |
} | |
static get observedAttributes() { | |
return ["imageUrl", "title"]; | |
} | |
attributeChangedCallback(name, oldVal, newVal) { | |
} | |
myFunc = function(){ | |
this.shadowRoot.querySelector(".title").innerHTML = this.getAttribute("title"); | |
} | |
} | |
window.customElements.define("my-component", MyComponent); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment