Last active
June 18, 2024 18:51
-
-
Save cferdinandi/5af9447941b64c1b58897ada14bf42aa to your computer and use it in GitHub Desktop.
Video tutorial: https://youtu.be/4ZCJDf5gjLA
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
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>My First Web Component</title> | |
<style> | |
body { | |
margin: 1em auto; | |
max-with: 40em; | |
width: 88%; | |
} | |
</style> | |
</head> | |
<body> | |
<wc-count> | |
<button>Clicked 0 Times</button> | |
</wc-count> | |
<script> | |
customElements.define('wc-count', class extends HTMLElement { | |
/** | |
* Instantiate our new component | |
*/ | |
constructor () { | |
// Inherit parent class properties | |
super(); | |
// Define instance properties | |
this.count = 0; | |
this.button = this.querySelector('button'); | |
// Listen for click events on the button | |
this.button.addEventListener('click', this); | |
// Add an ARIA live region to the button | |
this.button.setAttribute('aria-live', 'polite'); | |
} | |
/** | |
* Handle events | |
* @param {Event} event The event object | |
*/ | |
handleEvent (event) { | |
this.count++; | |
this.button.textContent = `Clicked ${this.count} Times`; | |
} | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment