Add support for styling inner components via CSS

[filingroove]

The issue

Back in 3.x it was possible to just apply CSS styles to the component using whatever CSS the project uses and it was possible to style inner parts however one sees fit. Now, it's all inside the Shadow DOM and it's impossible to really properly mess with styles, only option is theming, which doesn't suit every design.

The proposed solution

It may or may not be possible to expose parts of the component to be user with ::part() CSS selector so something like this becomes absolutely possible

.my-wrapper em-emoji-picker::part(search) {
  height: 32px;
  padding: 0px 10px 0px 34px;
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
}

Alternatively, support for custom render functions can be provided so one can pass entirely his own component so something like this becomes possible

renderSearch( props ) {
  // Do whatever with props and or just pass them to the component
  return (<StyledSearch {...props} />)
}

return (
  <Picker
    renderSearch={renderSearch}
  />
)