In essence, I think the correct approach to styling custom elements is to avoid putting any style into the element that isn't intrinsic to its functionality, and make the custom elements fine-grained enough that standard CSS styling works as well as possible. In general, this means that if you're styling stuff inside the component (i.e. inside the :host
and not inside the <slot>
then you really have no choice, and this means that any customization is going to be through attributes or css variables.
So far, I've implemented a dozen web-components together with a library that makes defining them easier. (If you want to create a web-component with the tagName FOO-BAR
then you can do it with makeWebComponent('foo-bar',{})
.) As I've progressed, I've put less and less styling into the components, and made it easier to style them conventionally, and it results in simpler code and more flexible components.
In essence, the goal is to make custom elements that behave as much like divs and as little like hybrid native controls with opaque styling (such as <select>
) or excessively styled custom elements (such as <input type=\"date\">
).
As I go back, I plan to apply lessons learned later in the process to some of the more rigidly styled components (e.g. <b8r-tab-selector>
) and where I find rigid styling to be unavoidable, I'll experiment with making it configurable via css variables.