Projects render un-expectedly when they are exported, because of the custom tag wrapper around them

[JayaKrishnaNamburu]

Issue

When we use components in angular. We are fairly similar with the selector syntax like app-component or app-home etc. Which are similar to how custom-elements are defined. So, browsers don't have a clue on how to render these. And so defines them as inline elements.

If an element is inline the width and height doesn't effect. And so, if the element is styled internally with a width and height the changes still doesn't have any effect. Let's take a look at an example from Angular

Codesandbox link --> https://codesandbox.io/s/bjkpo

The component root has a width of 100% explicitly set by the user, but this doesn't reflect because. The encapsulated app-component behaves as a inline element.

CSS for the root element inside component

.container {
  width: 100%;
  height: 400px;
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: var(--dl-color-success-300);
}

Let's check the same example using React
Codesandbox link --> https://codesandbox.io/s/7x28c

Solution

• The solution is always add contents to the :host of the component. So, the component wrapper doesn't effect the way in which things are rendered. Like here
  https://codesandbox.io/s/angular-bug-forked-4lcpk?file=/src/app/components/component/component.component.css

• The other way is to add width to the the :host when any width is explicitly mentioned on the root of the element.

:host {
  display: block;
  width: 100%
}

My opinion is contents works the best. Since, with the second solution we might sometimes come across un-expected behaviours too.

[JayaKrishnaNamburu]

Additional links

https://nitayneeman.com/posts/solving-a-styling-issue-for-rendered-components-in-angular/
https://stackblitz.com/edit/angular-hknw2a?file=src/app/app.component.scss