Conditional :host selectors taken into account on first instances when shouldn't

[tmsns]

This issue is happening under a number of conditions on the first instance of a web component.

1. You need to define a rule for a more specific :host selector eg. :host(.red-border)
2. In this rule, you need to use a more advanced css feature, eg. overriding a CSS mixin: --div-border: { border: 1px solid red; };
3. The first instance of the component is intended not to match this rule.

Here is an example: http://plnkr.co/edit/oCbDEY9e8XposAqUfsRS?p=preview

The reason seems to be a condition when calculating the scoped css: https://github.com/webcomponents/shadycss/blob/master/src/style-properties.js#L331 The condition states to only convert :host() selectors when ShadowDOM is active. Unfortunately, ShadyDOM doesn't match specific :host selectors either.
Subsequent instances are correctly calculated as the rule of the template will be transformed when actually styling the element. The transformed rule will then be cached for future use. This is why it is only happening on the first use

I will create a pull request with the removal of the ShadowDOM condition.

[askbeka]

+1

[web-padawan]

We've encountered the similar issue: vaadin/vaadin-button#63

I’ve witnessed this myself now also. For some reason it only happens on some pages, and only affects the first button on the page.

/cc @jouni