0

Currently I'm trying to create one Angular Element

To make the Element/Component reusable elsewhere, we need to somehow let parent/host component decide style for the Angular Element i'm working on

I already read some StackOverflow material which lead me to believe all the ways are deprecated at the moment

I think this is what we can do at the moment

<host-element>
      <my-element [getStyle] = "getStyleFnFromHost"> </my-element>
</host-element>

I don't feel like this is a good approach, however.

So what do you think I should do at the moment?

Edit: I would like to clarify that the difference from my question to the question that I refer to is that: I would like to find a good way inject CSS/Style from the parent element to the child element. That does not necessarily involves cascading CSS from parent to Child elements

qkhanhpro
  • 4,371
  • 2
  • 33
  • 45
  • Possible duplicate of [How to style child components from parent component's CSS file?](https://stackoverflow.com/questions/36527605/how-to-style-child-components-from-parent-components-css-file) – Tushar Walzade Feb 21 '19 at 09:23
  • `ViewEncapsulation.None` is the key, see [this](https://stackoverflow.com/a/50159982/5729813) answer – Tushar Walzade Feb 21 '19 at 09:23

1 Answers1

1

As described in the answer you referenced, the ::ng-deep piercing combinator is still the only way to do what you're asking. Yes, it will very likely be deprecated in the future, but only if and when an appropriate alternative is available (which is not yet the case).

From the Angular docs (highlights by me):

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

Jens Habegger
  • 5,266
  • 41
  • 57