feat: `visuallyIgnoreHostElement` option for angular to apply `display: contents`

[sidmohanty11]

Description

In this PR, we are adding a new option called visuallyIgnoreHostElement which attaches display: contents; to the host angular element, which means they will now just be considered as decoration element and will not interfere with dom stylings in any way.

Why is this needed? Refer: https://stackoverflow.com/questions/34280475/remove-the-host-html-element-selectors-created-by-angular-component/52292365#52292365

display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.

Steps to reproduce

• Go to angular.dev playground
• Use this code snippet,

  
  import {Component} from '@angular/core';
  import {bootstrapApplication} from '@angular/platform-browser';

@Component({ selector: 'deep', standalone: true, template: `

<div class="div"><ng-content></ng-content></div>

`, //styles: [':host { display: contents; }'] }) export class Deep{}

@Component({ selector: 'nested', standalone: true, template: `

hello

`, imports: [Deep], //styles: [':host { display: contents; }'] }) export class Nested{}

@Component({ selector: 'hello', standalone: true, template: `

`, imports: [Nested], //styles: [':host { display: contents; }'] }) export class Hello{}

@Component({ selector: 'app-root', standalone: true, template: `

`, imports: [Hello], }) export class PlaygroundComponent {}

bootstrapApplication(PlaygroundComponent);

- inspect elements and notice the angular components act as elements on the DOM and interfere with margin:auto which should've been applied in normal case and angular components should just behave as fragments
- if you add the comments back (display: contents), content are now centered because angular elements don't hamper the stylings now

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 06f3bb0d62eeab70f137d21de1878d932a42c0ad

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

| Name | Type | | ----------------------- | ----- | | @builder.io/mitosis | Minor | | @builder.io/mitosis-cli | Minor |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[nx-cloud[bot]]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 06f3bb0d62eeab70f137d21de1878d932a42c0ad. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 4 targets

- [`nx run-many --skip-nx-cache --target build --parallel 4 --exclude */e2e-alpine,@builder.io/mitosis-fiddle,@builder.io/talk-*,@builder.io/example-apps`](https://cloud.nx.app/runs/iPjYOCHkK1?utm_source=pull-request&utm_medium=comment) - [`nx build @builder.io/mitosis-site`](https://cloud.nx.app/runs/kWensTUxbu?utm_source=pull-request&utm_medium=comment) - [`nx build @builder.io/eslint-plugin-mitosis`](https://cloud.nx.app/runs/Qyf08qIVKV?utm_source=pull-request&utm_medium=comment) - [`nx build @builder.io/mitosis`](https://cloud.nx.app/runs/ss50CfqhpO?utm_source=pull-request&utm_medium=comment)

---

Sent with 💌 from NxCloud.