Improved parent selector support for :host ?

https://developers.google.com/web/fundamentals/web-components/shadowdom#styling

It’s hard to understand how to create shared styles for native and custom elements (light vs shadow DOM)

Example:

button.less

button {
  .shared-style;
}

my-custom-button.less

:host {
  .shared-style;
}

…/shared/button-styles.less

.shared-style() {
  &:hover {
    color: red;
  }
}

CSS output

button:hover {
  color: red;
}

:host:hover {
  color: red;
}

This is incorrect as :host requires any other selectors to be placed inside of parentheses.

For example:

:host(:hover) {
  color: red;
}

This can be fixed for :host by doing:

.shared-style() {
  &(:hover) {
    color: red;
  }
}

The problem is that this then breaks the button styles which is not ideal when sharing styles between native and custom elements - it all gets a bit complicated.

Breaking up the mixin into smaller parts is an option, however, as :host always requires parentheses, could {less} automatically output them in the CSS?

[seven-phases-max]

You’re closing to early I think. I’d wait for other opinions (me is known to be against everything and whining the most). After all there may be some neat idea flying around that could make everybody happy 😃…

(After all such sketching for possible workarounds sometimes makes one to step into weird never-seen-yet snippets like this for example)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.