@host styles aren't processed for base elements #72

JanMiksovsky · 2013-02-11T17:18:27Z

A component that inherits styles from a base component doesn't appear to pick up the @host rules defined by its base component(s). The following sample demonstrates the issue:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Subclass styling</title>
<script src="platform/platform.js"></script>

<element name="base-element">
    <link rel="components" href="components/g-component.html">
    <template>
        <style>
        @host {
            color: red;
        }
        </style>
        <content></content>
    </template>
</element>

<element name="sub-element" extends="base-element">
    <link rel="components" href="components/g-component.html">
    <template>
        <style>
        @host {
            font-weight: bold;
        }
        </style>
        <shadow></shadow>
    </template>
</element>

</head>

<body>
    <base-element>
        I'm red
    </base-element>
    <sub-element>
        I should be red and bold
    </sub-element>
</body>

</html>

The instance of the does have the styles within processed such that "@host" is replaced with "sub-element". However, the styles of the base component, are injected as is, without "@host" processing. So the that wants to be both red and bold ends up being just bold.

The text was updated successfully, but these errors were encountered:

sorvell · 2013-04-18T02:03:21Z

These issues should be resolved now when running under both native and polyfill'd shadowDOM.

Also note, the @host syntax has been changed to match the spec so that the proper usage is:

@host {
  * { 
  }
}

sorvell closed this as completed Apr 18, 2013

dfreedm pushed a commit that referenced this issue Sep 9, 2016

Fixes #72. (wip, needs more testing)

1f9e257

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@host styles aren't processed for base elements #72

@host styles aren't processed for base elements #72

JanMiksovsky commented Feb 11, 2013

sorvell commented Apr 18, 2013

@host styles aren't processed for base elements #72

@host styles aren't processed for base elements #72

Comments

JanMiksovsky commented Feb 11, 2013

sorvell commented Apr 18, 2013