CSS @apply not working when parent has same component as sibling

[jehna]

Description

@apply'ed CSS property from native CSS mixin is not getting applied on component, when the component has been used previously in the DOM without the CSS property.

Live Demo

http://jsbin.com/hiceguvoca/1/edit?html,console,output

Steps to Reproduce

1. Create my-element
2. Append my-element to document.body
3. Create wrapper-element that also has my-element inside it.
4. Append wrapper-element to body after my-element
5. @apply a css variable called --css-variable in my-element
6. Try to set any CSS property to the --css-variable block inside the wrapper-element

Expected Results

The CSS property should be applied to the my-element component inside wrapper-element

Actual Results

The CSS property is not applied.

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 9
• Safari 8
• IE 11

Versions

• Polymer: 2.0-preview
• webcomponents: v1

[jehna]

Known workaround:

Add the same CSS property to the component that was first introduced in the DOM. (see comment in the jsbin example)

[dfreedm]

Can reproduce without Polymer, so this is probably a ShadyCSS bug: http://jsbin.com/medaday/edit?html,output

[dfreedm]

This issue was moved to webcomponents/shadycss#69

[TomK]

I think this should be reopened here. I'm unable to reproduce it directly in shadycss, can anyone else get it to fail there?

Failing polymer codepen:
http://codepen.io/oridan/pen/jBQodm

[TomK]

@azakus is it possible to write a unit test against shadycss that fails as per your example? It seemed to work for me, but it's possible I set it up wrong. I might get chance to have another crack at it over the weekend.

[dfreedm]

@TomK looks like #4399 caused stamping the template to move to ready() which worked around #4486

[dfreedm]

Per findings in webcomponents/shadycss#69 (comment) and webcomponents/shadycss#69 (comment), reopening this issue and closing webcomponents/shadycss#69

[dfreedm]

Updated JSBin with master branches: http://jsbin.com/tajusit/edit?html,output, seems to work correctly.

However, I'm going to leave this open for a bit to make this a test in Polymer so we don't regress accidentally