Demo component
How do I make an demo component?
What is a demo component? How do you make a demo component? This script and codes were developed by Anthony Pothin on 17 January 2023, Tuesday.
Demo component Previews
Demo component - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>demo component</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body> <template id="hello-world"> <style scoped="scoped"> :host {} /* la balise custom */ :host-context(css selector) {} /* balise custom en fonction du parent de l'élément custom */ content[select="h1"]::content > h1 {} /* contenu h1 intégré via une balise <content select="h1">*/ ::content > h1 {} /* contenu h1 intégré via une balise <content>*/ /* from oustide => hello-world (élément custom) && hello-world::shadow h1 (shadow de l'élément custom) && hello-world /deep/ h1 (idem mais peu importe l'imbrication de shadow tree) (/deep/ a été remplacé récement par >>>) </style> <header> <content select="label"></content> </header> <main> </main> <footer> </footer>
</template>
<script>
var CustomFormTextElement = (function() { var parentDoc = (document._currentScript || document.currentScript).ownerDocument; // fonctions privées // objet custom return document.registerElement('cf-text', { prototype: Object.create(HTMLElement.prototype, { // méthode exécuté à chaque création de l'élément custom createdCallback: { // this représente l'objet custom element value: function() { // création shadow root this.createShadowRoot(); // ajout contenu depuis le template var cloneTemplate = document.importNode(parentDoc.querySelector('template#hello-world').content, true); this.shadowRoot.appendChild(cloneTemplate); // propriétés custom avec stockage caché var _maProp; Object.defineProperty(this, maProp, { configurable: false, enumerable: false, get: function() { return _maProp; }, set: function(value) { var oldValue = _maProp; _maProp = value Object.getNotifier(this).notify({ type: 'update', name: 'maProp', oldValue: oldValue }); } }); // ajout event interaction this.shadowRoot.querySelector('#button').addEventListener('click', function() { console.info('root', shadowRoot); shadowRoot.querySelector('#result').textContent = "pouet"; }, false); // ajout event propriété Object.observe(this, function(changes) { changes.forEach(function(change) { // change === {name (nom propriété), object (l'objet observé), type (add, update, delete), oldValue} console.info('Object.observe', change.name, 'qui valait', change.oldValue, 'vaut désormais', change.object[change.name]); // stuff }); }); // ajout event modification noeuds enfants (ajout/sup) new MutationObserver(onMutation.bind(this)).observe(this, { childList: true, subtree: false, attributes: false, characterData: false }); } }, // propriétés custom maProp1: { configurable: false, // default = false enumerable: false, // default = false value: "pouet", // function() {}, // default = undefined writable: false // default = false }, maProp2: { configurable: false, // default = false enumerable: false, // default = false get: function() {}, // default = undefined set: function(value) { var oldValue = something; something = value; Object.getNotifier(this).notify({ type: 'update', name: 'maProp2', oldValue: oldValue }); } // default = undefined }, // méthodes custom maMethod: { configurable: false, enumerable: false, value: function() {}, writable: false }, // méthode exécuté à chaque insertion de l'élément custom attachedCallback: { value: function() { // création des méthodes bindées // ajout des events } }, // méthode exécuté à chaque détachement de l'élément custom detachedCallback: { value: function() { // retrait des events // suppression des méthodes bindées } }, // méthode exécuté quand un attribut est modifié attributeChangedCallback: { value: function(attrName, oldValue, newValue) { console.info('attributeChangedCallback', attrName, 'qui valait', oldValue, 'vaut désormais', newValue); switch (attrName) { default: // update propriété this[attrName] = parseInt(newValue); break; } } } }) });
})();
</script>
</body>
</html>
| Developer | Anthony Pothin |
| Username | Thorien |
| Uploaded | January 17, 2023 |
| Rating | 3 |
| Size | 2,725 Kb |
| Views | 6,072 |
Do you need developer help for Demo component?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Anthony Pothin (Thorien) Script Codes
| Name | Size |
| Form - select | 10,146 Kb |
| Responsive slide | 2,400 Kb |
| Magic table | 8,674 Kb |
| Tab bar | 3,423 Kb |
| Custom list picker | 5,009 Kb |
| Form - datetime picker | 6,482 Kb |
| Flexible accordion | 2,356 Kb |
| Form - form | 3,487 Kb |
| Custom scrollbar | 7,800 Kb |
| A Pen by Anthony Pothin | 4,034 Kb |
Create amazing sales emails with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| RequestAnimationFrame | Martin-banks | 2,541 Kb |
| Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
| Retina canvas w. resize | Erikterwan | 1,882 Kb |
| Loader | MikitaLisavets | 3,321 Kb |
| Pattern lab logo | TimPietrusky | 3,666 Kb |
| A Pen by utcwebdev | Utcwebdev | 2,856 Kb |
| Pure CSS read more toggle | Idered | 2,344 Kb |
| Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
| Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
| Magnus 3 | ARocketfish | 7,944 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!