Skip to content
This repository was archived by the owner on Nov 16, 2021. It is now read-only.
This repository was archived by the owner on Nov 16, 2021. It is now read-only.

Discovery: using :host for low-specificity styles #14

@dvoytenko

Description

@dvoytenko

Related to #12.

In theory, a thing style-only-shadow could work for low-specificity styles on DOM level.

E.g. consider the following structure borrowed from the amp-selector spec. All of the contents of the amp-selector are in the light DOM. But the runtime could inject light shadow DOM subtrees with styles.

<amp-selector>
  <div option="value1" selected>
      #shadow-root          <-- this is inserted by the framework
        <slot></slot>         <-- propagate all DOM out
        <style>
           :host([selected]) {        <-- :host will have a low specificity
              outline: 1px solid blue;
           }
           :host:hover {
              outline: 1px solid lightgray;
           }
        </style>
  </div>
</amp-selector>

For more complicated trees, ::slotted can be similarly used.

Nuances to consider:

  1. Performance of adding shadow root where it's otherwise not needed. Adoptable stylesheets could help a lot.
  2. The :host() browser support.
  3. Other costs.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions