Add a replacement for <custom-style>

[tomivirkki]

The <custom-style> element, used for including main document-level styles, is a Polymer Web Component and so needs a replacement.

Example:

<custom-style>
  <style include="lumo-color"></style>
</custom-style>

It's already possible to use ESM for importing Vaadin styles and then include them in the main document with js, but the end result is quite verbose:

import { color } from '@vaadin/vaadin-lumo-styles';

const tpl = document.createElement('template');
tpl.innerHTML = `<style>${color.toString()}</style>`;
document.head.appendChild($tpl.content);

One option would be to extend registerStyles to also support main document-level styling:

import { registerStyles } from '@vaadin/vaadin-themable-mixin';
import { color } from '@vaadin/vaadin-lumo-styles';

registerStyles(undefined, color);
or
registerStyles('document', color);
or
registerStyles(document, color);

[lkraav]

Indeed, for this we implemented a registerGlobalStyles() in registerStyles() spirit

https://github.com/conversionxl/aybolit/blob/a75e8e67c35d99c80aa92fdea16d14dae6a11fdc/packages/cxl-lumo-styles/src/utils.js

[web-padawan]

See also #499

[Haprog]

I wonder if this should also support using ApplyShim (for legacy migration cases)?

[web-padawan]

I wonder if this should also support using ApplyShim (for legacy migration cases)?

We do not use CSS mixins in our components and do not recommend anyone to use them.
IMO there is no need for it at the moment, and hopefully we can avoid doing that.

[tomivirkki]

Also note that Polymer's <custom-style> will continue to work as before (assuming it gets imported).

If someone specifically wants to use <custom-style> with <style include="some-vaadin-style"> they can still do so by importing the style-modules adapter.

[lkraav]

Was struggling a bit today trying to phase out iron-icon in favor of vaadin-icon.

https://discord.com/channels/732335336448852018/1060531737794453575/1060531737794453575

Finally figured out with less Polymer loaded, some <custom-style> elements also needed a refactor.

1. It's a bit unclear, why

   web-components/packages/vaadin-lumo-styles/typography.js

   Lines 138 to 140 in 3f5113c

   	const $tpl = document.createElement('template');
   	$tpl.innerHTML = `<style>${font.toString().replace(':host', 'html')}</style>`;
   	document.head.appendChild($tpl.content);

   import @vaadin/vaadin-lumo-styles/typography.js does inject its <style> tag into head element, but it doesn't have any actual effect.

2. From opener here One option would be to extend registerStyles to also support main document-level styling:

If this would land, I'd be able to retire our registerGlobalStyles util then.

[web-padawan]

@lkraav Thanks for the feedback. I agree that the current code looks confusing. Here is what you would need to do:

web-components/packages/vaadin-lumo-styles/test/autoload.js

Lines 8 to 10 in 99e4df4

	const style = document.createElement('style');
	style.innerHTML = `${color.toString()} ${typography.toString()}`;
	document.head.appendChild(style);

[web-padawan]

This can be addressed by the following helper added in #5666 (currently marked as internal):

web-components/packages/vaadin-themable-mixin/register-styles.js

Lines 14 to 23 in 212637f

	export const addGlobalThemeStyles = (id, ...styles) => {
	const styleTag = document.createElement('style');
	styleTag.id = id;
	styleTag.textContent = styles
	.map((style) => style.toString())
	.join('\n')
	.replace(':host', 'html');
	document.head.insertAdjacentElement('afterbegin', styleTag);
	};