Created
November 16, 2017 17:33
-
-
Save johnrlive/0610e4ca24a5573eeec8933aceb6e50b to your computer and use it in GitHub Desktop.
Snuggsi Components
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
| <template onclick=onfoo> | |
| <h1>foo-bar custom element</h1> | |
| <slot name=content>Some Default Content</slot> | |
| <ul> | |
| <template name=bat> | |
| <li>Item {#} - Value {self} | |
| </template> | |
| </ul> | |
| </template> | |
| <script> | |
| Element `foo-bar` | |
| (class extends HTMLElement { | |
| onfoo(event) { | |
| alert `Registered on foo-bar` | |
| } | |
| get bat() { | |
| return ['football', 'soccer', 'baseball'] | |
| } | |
| }) | |
| </script> |
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> | |
| <title>Remote Component Example</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css"> | |
| <link as="fetch" id="foo-bar" rel="preload" href="foo-bar.html"> | |
| <script src=https://unpkg.com/snuggsi></script> | |
| <div class="columns"> | |
| <div class="column is-one-third"> | |
| <h1>Order</h1> | |
| <foo-bar onclick="onfoo"> | |
| <h1>Why wont Items load?</h1> | |
| <h1>Shouldn't items load from foo-bar.html</h1> | |
| <p slot="content">How does slots work?</p> | |
| <ul> | |
| <template name="bat"> | |
| <li>Item {#} - Value {self} | |
| </template> | |
| </ul> | |
| </foo-bar> | |
| </div> | |
| <div class="column"> | |
| <h1>Menu</h1> | |
| </div> | |
| </div> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment