Skip to content

[scoping] Direct parent of a :host-context() #7896

@Zefling

Description

@Zefling

I have a custom element <my-elem> and I would like only the one whose parent with class row to be affected:

<style>
  /* ... */
  :host-context(.row >) > div {
    background-color: blue;
  }
</style>
<div class=".row">
  <div>
    <my-elem>
      <div>DIV!</div>
      <main>MAIN!</main>
      <aside>ASIDE!</aside>
    </my-elem>
  </div>
<div>
<div class=".row">
  <my-elem>
    <div>DIV!</div>  <!-- Only this element -->
    <main>MAIN!</main>
    <aside>ASIDE!</aside>
  </my-elem>
<div>
<my-elem>
  <div>DIV!</div>
  <main>MAIN!</main>
  <aside>ASIDE!</aside>
</my-elem>

This doesn't seem possible, because > at the end of the selector is not valid.

There is a reason for this? If so, how can I do without?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions