Polymer: What to use *today* instead of @apply? ::part and ::theme?

[mercmobily]

Hi,

Sorry about opening an issue about this, but I couldn't find any info anywhere.
At the Summit, Steve suggested (https://www.youtube.com/watch?list=PLNYkxOF6rcIDP0PqVaJxqNWwIgvoEPzJi&time_continue=1185) that @apply is going away, and ::part and ::theme are going to be replacing it.
Is that still the case?

I am developing a brand new app. I had to go with Polymer 2 rather than 3 for obvious reasons. But, shall I use ::part and ::theme for my elements so that the upgrade path is shorter?

A blog entry/update about this would be amazing.

Thanks!

Merc.

[kevinpschaaf]

Hi @mercmobily, we do see ::part/::theme (aka CSS Shadow Parts) as the long-term replacement for @apply. At the recent web components face-to-face meeting among browser vendors, there was agreement to move forward with CSS Shadow Parts and Chrome is already starting implementation
under this tracking issue.

That said, we are still evaluating whether it's worthwhile or even possible to make a shadow parts polyfill/shim that would be performant enough to recommend anyone use in production. For this reason, we're not removing support for @apply in Polymer 2/3 and will continue supporting it as an option to serve this use case until the platform delivers shadow parts. Alternatively, CSS Custom Properties, which are definitely less powerful in terms of arbitrary theming, are well-supported, and a good alternative which avoid the performance impact of the polyfill. Hope that helps clarify where we're at.

[mercmobily]

Hi,

Ouch... so we are going to use @apply until ::part and ::theme become widely used... but even then, without shims, it might mean that we will wait 3/4 years before being able to use them in production!

Ouch.

Merc.

[robrez]

I've been wondering/worrying about this quite a bit, too. Thanks, Kevin, for the clarification.

I did recently notice that some of the elements from vaadin have ditched style mixins. What they're doing instead seems like a step towards ::part styling...

The gist of it is style-modules + a bit of "auto-wiring". During an element's getTemplate lifecycle callback, they look for registered style modules and dynamically change the template's style tag to @include="found-style-module"

Further reading: https://github.com/vaadin/vaadin-themable-mixin/wiki

Thought you might find it interesting @mercmobily

[web-padawan]

Yes, in Vaadin we aim to design styling API using ThemableMixin so that it would be easier to follow Shadow parts spec in the future. See also this video describing our approach in more detail. Please keep in mind that we do not polyfill that spec, but use the existing CSS features. The Polymer 3 versions of our components are now WIP but we are inclined to keep the same approach there.

[mercmobily]

This is a very interesting idea.