Context with inheritance of static components
Let's suppose we have a parent LWC component with .js, .html and .css parts.
Let's also support we have a child LWC component which extends the parent component.
To display the child component :
- if the child only has a .js part, then the HTML and CSS of the parent are used,
- if the child also has an HTML part, it is used instead of the parent HTML part,
- if the child also has a CSS part, it is used instead of the parent CSS part.
Context extended to the inheritance of dynamic components
Let's now suppose that the parent component is generated dynamically.
So the HTML part of the parent is simply :
<template> <div lwc:dom="manual"></div></template>
This is OK and works well : the CSS of the parent decorates the component generated dynamically in the div.
If the child wants to resuse the dynamic generation of the parent, it might look like this (in my case) :
<!-- child.html --><template> <lightning-card title={title} icon-name="custom:custom14"> <div lwc:dom="manual"> <!-- This is populated by the parent --> </div> </lightning-card></template>So, once again, this works well : when displaying the child component, the parent's HTML is not used, but the parent JS generates the dynamic component in the child's HTML's div above. Once again, the parent's CSS decorates the dynamically generated component displayed in the child.
Problem
If I now add a child.css to decorate the lightning-card of the child, my child now has a CSS part, and the parent's CSS part is ignored : unfortunately, the dynamically generated component in the child's HTML is no longer decorated by the parent's CSS which is ignored.
Questions
- How can I resolve this problem without breaking encapsulation, which supposes that the developer of the child component does not know anything about the way the parent component is implemented (especially its CSS part, in our case) ?
- Is there a solution to this problem which also works if the parent component is part of a managed 2GP package, and the child is unpackaged ?
cc @LWC
The child is not dynamically generated.
The child is a static class, which inherits from the parent. The parent generates a dynamic LWC component. The parent has its own CSS. If I add a child.css to the child, the parent.css is no longer used.
NB : this is about inheritance. Child is inherited from parent.
