Last active
January 21, 2020 12:01
-
-
Save defx/465b224af71251f6db4328684aea58de to your computer and use it in GitHub Desktop.
Preact compatibility with customised built-in elements
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
| import { h, Component } from "preact"; | |
| import { Router } from "preact-router"; | |
| import Header from "./header"; | |
| // Code-splitting is automated for routes | |
| import Home from "../routes/home"; | |
| import Profile from "../routes/profile"; | |
| export default class App extends Component { | |
| /** Gets fired when the route changes. | |
| * @param {Object} event "change" event from [preact-router](http://git.io/preact-router) | |
| * @param {string} event.url The newly routed URL | |
| */ | |
| handleRoute = e => { | |
| this.currentUrl = e.url; | |
| }; | |
| render() { | |
| return ( | |
| <div id="app" is="built-in"> | |
| <autonomous-element /> | |
| <Header /> | |
| <Router onChange={this.handleRoute}> | |
| <Home path="/" /> | |
| <Profile path="/profile/" user="me" /> | |
| <Profile path="/profile/:user" /> | |
| </Router> | |
| </div> | |
| ); | |
| } | |
| } |
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"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title><% preact.title %></title> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <meta name="mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <% preact.headEnd %> | |
| </head> | |
| <body> | |
| <script> | |
| class BuiltIn extends HTMLDivElement { | |
| constructor() { | |
| super(); | |
| console.log("constructed built-in"); | |
| } | |
| connectedCallback() { | |
| console.log("connected built-in"); | |
| } | |
| } | |
| class AutonomousElement extends HTMLElement { | |
| constructor() { | |
| super(); | |
| console.log("constructed autonomous"); | |
| } | |
| connectedCallback() { | |
| console.log("connected autonomous"); | |
| } | |
| } | |
| customElements.define("built-in", BuiltIn, { extends: "div" }); | |
| customElements.define("autonomous-element", AutonomousElement); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment