Why do element selectors supersede the :host selector in custom elements with shadow DOM

Question

If you create a custom element with a shadow root, and add style rules to it with a :host selector:

<style>
    :host {
        color: red;
    }
</style>

And then add styles in the light DOM for the custom element, using an element selector:

 <style>
    custom-element {
        color: blue;
    }
</style>

The styles in the element selector supersede the styles in the :host selector. This is, arguably, ideal behaviour - but I am curious why this is true... if :host is a pseduo-class, should it not have a higher specificity than custom-element, and take precedence? If this is an exception to the rule, is it documented in specifications somewhere?

See JsFiddle Example

Answer 1

It is true because it's the ideal behaviour as you stated.

It is implemented as wanted by the CSS Scoping Module Level 1 specification:

When comparing two declarations that have different tree contexts, then for normal rules the declaration earlier in the shadow-including tree order wins, and for important rules the declaration coming later in the shadow-including tree order wins.

Note: This is the opposite of how scoped styles work.