Steve Orvell sorvell
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
| $namespace: 'mynamespace_'; | |
| // .a > ::slotted(*) => .a > * | |
| // :host(*) => &El* | |
| // scoping | |
| // Step 1: all inputs must have `:host` converted to `.El` and `::slotted(a)` converted to `a`. | |
| // Step 2: If scoping is on, the main Sass file needs to be namespace-ified. |
sorvell
/ input.scss
Created
October 22, 2021 01:27
— forked from kevinpschaaf/input.scss
Generated by SassMeister.com.
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
| /* shared-stuff.sass */ | |
| @mixin sharedStuff { | |
| :host { | |
| color: red; | |
| } | |
| .mdc-density-5 { | |
| padding: 5px; | |
| } | |
| } |
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
| .my-namespace { | |
| &hi { | |
| color: orange; | |
| } | |
| /* as long as you use & on all parts of the selector, they are "scoped" */ | |
| &hi &yo { | |
| color: blue; | |
| } |
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
| class MyElement extends LitElement { | |
| // Promise that will resolve when the entire subtree of the element's `renderRoot` has finished updating/rendering. | |
| get updateSubtreeComplete() { | |
| async function awaitSubtree(el) { | |
| await el.updateComplete; | |
| const clients = el.renderRoot!.querySelectorAll('*'); | |
| await Promise.all(Array.from(clients).map((e) => | |
| e.updateSubtreeComplete || awaitSubtree(e as UpdatingElement))); | |
| } |
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> | |
| <head> | |
| <script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script> | |
| <script type="module" src="https://unpkg.com/@material/mwc-button@^0.1.0/mwc-button.js?module"></script> | |
| <script type="module" src="https://unpkg.com/@material/mwc-fab@^0.1.0/mwc-fab.js?module"></script> | |
| <script type="module" src="https://unpkg.com/@material/mwc-icon@^0.1.0/mwc-icon.js?module"></script> | |
| <script type="module" src="https://unpkg.com/@material/mwc-checkbox@^0.1.0/mwc-checkbox.js?module"></script> | |
| <script type="module" src="https://unpkg.com/@material/mwc-radio@^0.1.0/mwc-radio.js?module"></script> | |
| <script type="module" src="https://unpkg.com/@material/mwc-switch@^0.1.0/mwc-switch.js?module"></script> |
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> | |
| <head> | |
| <!-- Polyfills only needed for Firefox and Edge. --> | |
| <script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script> | |
| </head> | |
| <body> | |
| <!-- Works only on browsers that support Javascript modules like | |
| Chrome, Safari, Firefox 60, Edge 17 --> | |
| <script type="module"> |
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
| // Given this file tree | |
| /utils/polybuild | |
| /projects/my-app/ | |
| components/ | |
| polymer | |
| iron-icon | |
| elements.html | |
| index.html | |
| // Build use cases: |
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
| // polyfill for 'slot' | |
| <x-slot name="scaffold-tab" slot="tab"></x-slot> | |
| // produces | |
| <x-slot name="scaffold-tab" slot="tab"> | |
| <content select='[slot="scaffold-tab"]'></content> | |
| </x-slot> | |
| then... |
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
| var shadow = host.createShadowRoot({ | |
| // called synchronously for each node *added* to shadow's distribution pool | |
| // called sequentially for each content in shadow until `true` is returned. | |
| shouldDistributeNodeToInsertionPoint: function(node, content) { | |
| // to implement catch-all | |
| return true; | |
| // to implement <content select="..."> | |
| // return node.matches(content.getAttribute('select')); | |
| // to implement <content slot="..."> | |
| // return node.getAttribute('slot') === content.getAttribute('slot'); |
sorvell
/ gist:e9806004a28f015b98a9
Last active
August 29, 2015 14:17
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
| desirable: | |
| - distribution before change handlers: allows use of distribution info in change handlers, good | |
| - ready before attached? | |
| Shady: | |
| 1. Create A | |
| 2. create A.root: stamps template containing B (goes all the way down) | |
| 2.1 B is created... go to 1 for it | |
| 3. initialize (we ensure this is top down starting at A and this whole process is 1 loop) | |
| 3.1 A is distributed |
NewerOlder