Last active
August 22, 2025 09:00
-
-
Save wentout/057304bcaeb17e3fb4bc16efe719a55d to your computer and use it in GitHub Desktop.
HTMLElement Proxy
This file contains hidden or 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
| <html> | |
| <head> | |
| <style> | |
| #some { | |
| padding: auto; | |
| text-align: center; | |
| border: 1px solid red; | |
| min-height: 100px; | |
| font-size: 7vh; | |
| } | |
| </style> | |
| </head> | |
| <body bgcolor="white"> | |
| <div id="some"></div> | |
| <script src="MyHTMLElement.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or 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 { HTMLElement } = window; | |
| class MyHTMLElement extends HTMLElement { | |
| communicate(value) { | |
| this.innerHTML = `${this.protoAddition} + ${this.addition} + ${value}`; | |
| } | |
| addition = 'addition'; | |
| } | |
| const protoProps = { | |
| protoAddition: 'protoAddition', | |
| }; | |
| Object.setPrototypeOf(protoProps, HTMLElement.prototype); | |
| const proxy = new Proxy(protoProps, { | |
| get(target, prop, receiver) { | |
| const result = Reflect.get(target, prop, receiver); | |
| console.log('get:', prop, result); | |
| return result; | |
| }, | |
| set(target, prop, value, receiver) { | |
| const result = Reflect.set(target, prop, value, receiver); | |
| console.log('set:', prop, result, value); | |
| return result; | |
| }, | |
| }); | |
| Object.setPrototypeOf(MyHTMLElement.prototype, proxy); | |
| customElements.define('my-custom-element', MyHTMLElement); | |
| const myElement = document.createElement('my-custom-element'); | |
| console.log('myElement instanceof MyHTMLElement', | |
| myElement instanceof MyHTMLElement); | |
| console.log('myElement instanceof HTMLElement', | |
| myElement instanceof HTMLElement); | |
| console.log('render begins'); | |
| myElement.innerText = 123; // set | |
| const renderBox = document.getElementById('some'); | |
| renderBox.appendChild(myElement); | |
| console.log('render finish'); | |
| myElement.communicate('message'); | |
| console.log(myElement.innerText); // get |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment