Add support for radio buttons based on a slot

[Fleker]

For a smart home sample project we want to have several exclusive options for a given smart home state backed by icons. Rather than writing our own radio-group element we'd like to use the existing radio-group and radio-button elements. This change adds an optional icon attribute and icon slot to the element which transforms the regular empty/filled buttons into a colorful icon.

See the updated demo for the design.

@proppy

[proppy]

what about putting the slot on #radioContainer instead have have #onRadio #offRadio as the fallback content. That would allow you not override any of the existing CSS rules.

[Fleker]

Something like

<slot name="icon">
  <p>I'm some default content!</p>
</slot>

One challenge I ran into making this PR is that it seems hard to actually change the styles in shadow DOM from outside the stylesheet. I couldn't apply changes to #offRadio unless it was in this element or I exposed a variable.

[proppy]

I was more thinking of:

<div id="radioContainer">
   <slot name="radioContent">
       <div id="onRadio"></div>
       <div id="offRadio"></div>
   </slot>
</div>

And the CSS for #onRadio and #offRadio would get automatically trashed if you override the slot.

[Fleker]

If I put something custom in the slot, can I customize it using external CSS? Or is it still bound by shadow DOM rules?

[proppy]

Assuming it's an iron-icon and the existing CSS rules that applied on #onRadio and #offRadio are discarded, would it need any additional external CSS than the one included in the <iron-icon> shadow DOM?

[proppy]

https://developer.mozilla.org/en-US/docs/Web/CSS/::part or have a custom iron-radio-selectable that embed an icon w/ dedicated CSS and follow https://www.webcomponents.org/element/@polymer/paper-radio-group selection protocol (thru PaperCheckedElementBehavior?)

[Fleker]

For our purposes we really just need to stick an icon in there. Maybe we can use the ::part rule, but I don't want to implement too much custom behavior.

[Fleker]

I'd be interested in getting some advice from @bicknellr on what may be the most idiomatic way

[Fleker]

I've updated the PR to use ::part and extract the style behavior outside of the component. I'm not sure if this is the best approach, as it means the default will not work very well, but it should be otherwise be functional.

[proppy]

Now that you're using ::part that should mean that the CSS could live outside of the element, no? So the only patch you really need here is a <slot> (and putting in on the parent would allow you to discard both element and their associated css rule).