-
-
Save samuellevy/848408a2c4e02273ba336f329221a7ae to your computer and use it in GitHub Desktop.
Simple example using brython webcomponents
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
| <!DOCTYPE html> | |
| <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>LT</title> | |
| <script type="text/javascript" | |
| src="https://cdn.jsdelivr.net/npm/brython@3.8.9/brython.min.js"> | |
| </script> | |
| <script type="text/javascript" | |
| src="https://cdn.jsdelivr.net/npm/brython@3.8.9/brython_stdlib.min.js"> | |
| </script> | |
| <script type="text/python"> | |
| from browser import webcomponent, html, bind, document | |
| names = [ | |
| 'Eduardo', | |
| 'Eduarda', | |
| 'Eduardu', | |
| 'Eduards', | |
| 'Maria', | |
| 'Will' | |
| ] | |
| class SimpleListComponent: | |
| def __init__(self): | |
| self.shadow = self.attachShadow({'mode': 'open'}) | |
| self.names = names | |
| def name_list(self): | |
| node = self.shadow.select_one('ul') | |
| if node: | |
| self.shadow.removeChild(node) | |
| ul = html.UL(html.B('Names')) | |
| for x in self.names: | |
| ul <= html.LI(x) | |
| self.shadow <= ul | |
| def attributeChangedCallback(self, attr, old_value, new_value, *_): | |
| if not new_value: | |
| self.names = names | |
| else: | |
| self.names = filter( | |
| lambda name: new_value.lower() in name.lower(), names | |
| ) | |
| self.name_list() | |
| def observedAttributes(self): | |
| return ['data-contains'] | |
| webcomponent.define( | |
| 'simple-component', SimpleListComponent | |
| ) | |
| @bind('input[name="contains"]', 'keyup') | |
| def change(event): | |
| document.select_one( | |
| 'simple-component' | |
| ).attrs['data-contains'] = event.currentTarget.value | |
| </script> | |
| </head> | |
| <body onload="brython()"> | |
| <label for="contains">Contains: </label> | |
| <input type="text" name="contains"> | |
| <simple-component data-contains=""></simple-component> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment