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: `
  <style>
    .div {
      margin-left: auto;
      margin-right: auto;
    }
    </style>
    <div class="div"><ng-content></ng-content></div>
  `,
  //styles: [':host { display: contents; }']
})
export class Deep{}

@Component({
  selector: 'nested',
  standalone: true,
  template: `
    <deep>hello</deep>
  `,
  imports: [Deep],
  //styles: [':host { display: contents; }']
})
export class Nested{}

@Component({
  selector: 'hello',
  standalone: true,
  template: `
   <style>
    .div2 {
      display: flex;
      flex-direction: column;
    }
    </style>
  <div class="div2">
    <nested />
    <nested />
    <nested />
    </div>
  `,
  imports: [Nested],
  //styles: [':host { display: contents; }']
})
export class Hello{}

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <hello></hello>
  `,
  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]

🦋 Changeset detected

Latest commit: 06f3bb0

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]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 06f3bb0. 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
• nx build @builder.io/mitosis-site
• nx build @builder.io/eslint-plugin-mitosis
• nx build @builder.io/mitosis

---

Sent with 💌 from NxCloud.