/deep/ and ::shadow deprecation and Polymer elements

[Pavel Sergeev]

Hello,

there is a plan to remove /deep/ and ::shadow support from the dynamic profile in Blink (http://crbug.com/489954).

It means that /deep/ and ::shadow in CSS code will stop working in Chrome soon.

I know, that Polymer provides an alternative in a form of custom CSS properties. However /deep/ and ::shadow

are still used in implementation of several Polymer elements, either directly (e.g. paper-slider/paper-slider.css) or

indirectly, by using classes defined in iron-flex-layout/classes/iron-flex-layout.html (e.g. <paper-tab>, <paper-progress>).

What do you think about that? Are you planning to eliminate usages of /deep/ and ::shadow in Polymer elements implementations?

Thanks

--  

Pavel

[Eric Bidelman]

+Taylor Savage +Yvonne Yip do we have plans to move away from the deprecated CSS features?

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/a4e3d3b7-ef38-4478-9af3-ed79a0005b34%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Max]

I'd be interested to know the plans here, since it means existing app will stop working with new browsers. Will there be some way to turn those features on again?

Max.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CACGqRCCiuADzz%3DHjSFoJFA262RuED15BO3wU2E-Bpu8asEkd-g%40mail.gmail.com.

[Taylor Savage]

+sorvell, cdata

[Kevin Schaaf]

Yes, the plan is to migrate all use of /deep/ and ::shadow in Polymer elements to custom properties, as it has been removed from the spec and as noted Chrome has posted deprecation warnings.  The vast majority of that migration was already done during the 1.0 port and anything remaining should be vestigial at this point and should be cleaned up soon.  I opened an issue for paper-slider; feel free to open issue on any other stragglers you find (a quick search didn't find any).

It is unlikely that Chrome will actually remove support for these combinators in the immediate future and the Shady DOM styling shim does support it for now so there is no immediate risk of breakage; however our team rule is to not rely on them going forward, and users obviously shouldn't either.

Kevin

On Wed, Jul 8, 2015 at 8:44 AM, Max <davidmax...@gmail.com> wrote:

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAMZCrPj9zkR7iF%3D1FqoYTSysdEF3PWxwmC3LYeOXqD_O79PSLQ%40mail.gmail.com.

[Eric Eslinger]

It does probably light a stronger fire under us slowpokes who are still using the 0.5 release, however.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAHW5_6wdOAx9iXcqj0Htrb1Z6na%2BiwO8MMTj3Fm95Vt2uiLoEA%40mail.gmail.com.

[Max]

Thanks guys for the elaboration and it's a bit of a relief that it isn't imminent at least.

Note that some of us actually want to develop elements (and apps) that will work in the long term, that we can actually 'finish' and not be a life-time commitment of maintenance - it was looking like I would have to go back over the projects I've been involved with and fix them all, somehow, and I don't think my employer would have been completely happy at the prospect (and, actually, would probably have just let them die - it's a choice :/).

I wonder what the alternatives are for /deep/ and ::shadow in 0.5 apps - so that I can start avoiding their use already...

Thanks,

Max.

[Max]

> I wonder what the alternatives are for /deep/ and ::shadow in 0.5 apps - so that I can start avoiding their use already...

Does anyone have suggestions?

Note that we use polymer 0.5 elements that are controlled by other people and so we can't just go in and change them, so our options are limited.

I see mention of allow /deep/ in a 'static profile'. i'm not sure what that is, tbh.

Thanks,

Max.

[isha...@gmail.com]

Have you been able to update your codebase to 1.0? How did you actually substitute all those /deep/ tags? Is there a shim/tool that can be used in runtime/compile time?

Our codebase is vastly dependant on Polymer 0.5. What we did is we packaged our whole web based application as downloadable applications for Ubuntu, Windows and OS X using http://nwjs.io/ with the V8 binaries that still support /deep/ tags. Then we asked the users to just download them. The application is used by a few very specific organizations internally so it is an acceptable tradeoff for the time being.

[Max]

I'm not sure if you're referring to me or someone else, but anyway...

No, I've not managed to even get to the point of replacing /deep/ and ::shadow styles. yet. There have been so many fixes/improvements to polyup that I restarted my upgrade process, and decided to start simply by adding lint/inline lint and fixing the problems it brought up (and the problems the fixes brought up). I'm wishing we had done a more thorough test suite.

My intention is to find the places where /deep/ is used and apply those style on webcomponentsready (or in the component's ready/created? callback) using document.querySelectorAll('html /deep/...') with an appropriate selector javascript. This will probably requires some attention to FOUC issues, so I'll probably just use visibility to hide the parent elements and make them visible again when the style is applied.
...but, yeah, probably some issues there that I have to look forward to.

[Takayoshi Kochi]

The deprecation will happen some day, but not in a day or two.

We are still seeing very high usage, probably due to existing Polymer 0.5 users.

As other browsers including Safari/WebKit won't implement /deep/, for interoperability

it is better to move away from using /deep/ and ::shadow.

For the replacement, CSS custom properties (formerly called CSS variables) are being worked on, and

will be in Chrome soon (I hope).

To answer Max's old question, "static profile" is a profile that is used for querySelector/querySelectorAll,

to allow slow operations only when used from JavaScript, but not allow ones in CSS (which is called

"dynamic profile").  This is still unresolved and the future is not yet determined.

The discussion is here: https://github.com/w3c/webcomponents/issues/78

For reference, see https://drafts.csswg.org/selectors-4/ for the definition of "static profile" and "dynamic profile".

(it seems to be called "complete profile" and "fast profile" in older spec http://www.w3.org/TR/selectors4/).

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAMZCrPjjwkNtDpdCtE9Auv8mMJ2TvxEYZARU%3D14H7HgUWQzr%3DQ%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--

Takayoshi Kochi

[Elliott Sprehn]

On Wed, Oct 28, 2015 at 2:51 AM, Max <davidmax...@gmail.com> wrote:

I'm not sure if you're referring to me or someone else, but anyway...

No, I've not managed to even get to the point of replacing /deep/ and ::shadow styles. yet. There have been so many fixes/improvements to polyup that I restarted my upgrade process, and decided to start simply by adding lint/inline lint and fixing the problems it brought up (and the problems the fixes brought up). I'm wishing we had done a more thorough test suite.

My intention is to find the places where /deep/ is used and apply those style on webcomponentsready (or in the component's ready/created? callback) using document.querySelectorAll('html /deep/...') with an appropriate selector javascript. This will probably requires some attention to FOUC issues, so I'll probably just use visibility to hide the parent elements and make them visible again when the style is applied.
...but, yeah, probably some issues there that I have to look forward to.

Instead I might suggest putting those deep rules into a shared stylesheet and then having components that care about them include that sheet internally. It's okay to include the same sheet in a bunch of places. 

- E 

[Max]

Many of the components I'm styling are third party so I can't do that (without forking them).

Btw, I notice the chrome depreciation warning on querySelector() calls and even lines which are completely unrelated...bit strange.

Max.

[Günter Zöchbauer]

AFAIK `querySelector()` should still support /deep/ and ::shadow, it is only deprecated for CSS