Skip to content

Instantly share code, notes, and snippets.

@sorvell
Created May 14, 2015 22:07
Show Gist options
  • Save sorvell/4db60358394bfc35446f to your computer and use it in GitHub Desktop.
Save sorvell/4db60358394bfc35446f to your computer and use it in GitHub Desktop.
Slot polyfill
// 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...
<x-scaffold>
<x-tab slot="scaffold-tab"></x-tab>
<x-panel slot="scaffold-panel"></x-panel>
SR
<x-tab-panels>
<x-slot name="scaffold-tab" slot="tab"></x-slot>
<x-slot name="scaffold-panel" slot="panel"></x-slot>
</x-tab-panels>
<x-scaffold>
@sorvell
Copy link
Author

sorvell commented May 14, 2015

Given this approach, 'x-tab-panels' cannot style 'x-tab' without a crazy ::content ::content x-tab rule. (http://jsbin.com/luhomi/2/edit)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment