What is the best way to contain the global CSS of an Angular app within an exported web component?

Question

What is the best way to contain the global CSS of an Angular app within an exported web component?

Objective

In my Angular 11 website, there is a comprehensive form component created using Angular Material named myExportableComponent. I aim to utilize this component in the site as usual, but also export it as a generic web component or "custom element," known as an "Angular Element." This will enable its usage on any third-party platform, regardless of their technology stack, while functioning identically to how it operates on my site.

myExportableComponent should retain normal functionality as an Angular component within my website. It should be customizable through both global CSS located in styles.scss and component-specific CSS found in my-exportable.component.scss.

When implemented as a web component, myExportableComponent must also respond to global and component-specific CSS styling like regular, without impacting the surrounding elements on the third-party page where it is embedded. This aspect presents a challenge for me.

Current Configuration

The myExportableComponent is organized within a distinct sub-project of the main project. I am able to build it independently and integrate the generated js/css files into another site successfully. The process resembles:

<link rel="stylesheet" href="myExportableComponentStyles.css">
<script type="text/javascript" src="myExportableComponent.js"></script>

<div class="mat-app-background mat-typography">
    <my-exportable-component></my-exportable-component>
</div>

To ensure that myExportableComponent shares styles with my primary site, adjustments were made in angular.json, linking it to the main app's theme.scss file (containing Angular material theme) and styles.scss (additional global styles). The setup looks like this...

angular.json:

"mainApp": {
    ...
        "styles": [
            "src/theme.scss",
            "src/styles.scss"
        ],
"myExportableComponentApp": {
    ...
        "styles": [
            "src/theme.scss",  //NOT "projects/myExportableComponentApp/src/theme.scss"
            "src/styles.scss"  //NOT "projects/myExportableComponentApp/src/styles.scss"
        ],

Issue at Hand

The global CSS does not remain contained when the web component is inserted on a different site. For instance, adding a global link style for my app in styles.scss impacts all links on the external site's layout too. While the styles from theme.scss (Material) appear isolated, this may change if the host site also employs Angular Material.

Potential Solutions

Idea #1: encapsulation settings

Considering employing

encapsulation: ViewEncapsulation.ShadowDom

on myExportableComponent, however, A) it disrupts some of the Material styling and icons, and B) it fails to address the fundamental issue concerning global CSS. Furthermore, the default setting appears effective in containing component-specific CSS.

Idea #2: target global CSS to my HTML only

If consumers could include a specific class in their HTML tag as present in my app and apply it around the web component, it might allow targeting of global CSS solely to elements within those containers, such as:

.special-wrapper a {
   /* styling */
}

This method does isolate global styles from the third-party page effectively. Nonetheless, it seems to result in a precedence conflict where global styles override component-specific styles erroneously.

Idea #3: utilization of :host or :host-context selectors in global CSS?

I confess struggling with implementing these selectors and observed no noticeable impact in my application.

Idea #4: Build-time scripts?

Upon building the myExportableComponent sub-project, if there exists a means to automatically extract all global CSS from theme.scss and

styles.scss</code, transferring them to the beginning of <code>my-exportable.component.scss</code, it could potentially resolve the issue. Consequently, my "global" styles would then remain encapsulated within the web component due to placement in the component-specific file.</p>
<p>Is such a modification feasible during the execution of <code>ng build myExportableComponentApp --prod

? Regrettably, I lack initial guidance on the implementation.

Any innovative suggestions are welcome!

css angular web-component angular-elements

Answer 1

Answer №1

Here is the approach I ultimately took:

I removed the global style.scss file for the sub-project from the angular.json.
I created a new component that extends myExportableComponent, with no additional code of its own. This new component shares the template of the base component and does not need to be exported from the sub-project module. This ensures that the main app can only use the base component by default.
The styleUrls property of the new child component includes two files. The first file is a component-specific stylesheet that simply imports the global site stylesheet using something like
```
@import '../../../../../../src/app/styles.scss';
```
. I encountered build errors when trying to reference the global stylesheet directly, so importing it within a "normal" component-specific stylesheet solved the issue. The second file references the normal component-specific stylesheet of the base component.
When creating the custom element for the web component, I used the child component instead of the parent.

In summary, when building the generic web component, the global css from the main site will be included at the top of the component-specific css for myExportableComponent, rather than being applied globally. This encapsulates the global styles and allows them to still be overridden by component-specific styles as usual.

I also wanted to apply the same technique to the theme.scss containing the Material theme, but it seems to only work if it's in the global scope (https://github.com/angular/components/issues/3386). However, this limitation is not a critical issue for me at the moment.

PROs:

No need for special setup or disruption of the main site project. Both it and myExportableComponent can be managed in the standard way within our main app.
Style encapsulation functions the same in the exported web component as it does in our main project, without leaking out to external sites.
No requirement for special build scripts.

CONs:

It may seem unconventional, and precautions must be taken to prevent other developers from adding content to the dummy/inherited files used in this solution.
As far as I could determine, applying this method to the Material theme css is currently not feasible.

Answer 2

Here is the approach I ultimately took:

I removed the global style.scss file for the sub-project from the angular.json.
I created a new component that extends myExportableComponent, with no additional code of its own. This new component shares the template of the base component and does not need to be exported from the sub-project module. This ensures that the main app can only use the base component by default.
The styleUrls property of the new child component includes two files. The first file is a component-specific stylesheet that simply imports the global site stylesheet using something like
```
@import '../../../../../../src/app/styles.scss';
```
. I encountered build errors when trying to reference the global stylesheet directly, so importing it within a "normal" component-specific stylesheet solved the issue. The second file references the normal component-specific stylesheet of the base component.
When creating the custom element for the web component, I used the child component instead of the parent.

In summary, when building the generic web component, the global css from the main site will be included at the top of the component-specific css for myExportableComponent, rather than being applied globally. This encapsulates the global styles and allows them to still be overridden by component-specific styles as usual.

I also wanted to apply the same technique to the theme.scss containing the Material theme, but it seems to only work if it's in the global scope (https://github.com/angular/components/issues/3386). However, this limitation is not a critical issue for me at the moment.

PROs:

No need for special setup or disruption of the main site project. Both it and myExportableComponent can be managed in the standard way within our main app.
Style encapsulation functions the same in the exported web component as it does in our main project, without leaking out to external sites.
No requirement for special build scripts.

CONs:

It may seem unconventional, and precautions must be taken to prevent other developers from adding content to the dummy/inherited files used in this solution.
As far as I could determine, applying this method to the Material theme css is currently not feasible.

Answer 3

Answer №2

My approach involves utilizing scss/sass in a unique way.

In my (global) styles.scss file, I have organized my global styles within the webcomponents "tag". This method seems to be effective even with nested imports, such as those for bootstrap.

https://sass-lang.com/documentation/at-rules/import#nesting

my-component-tag {
  @import '../../../libs/some.scss';
  
  body {
    margin: 0px;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }
  
  .modal-content {
    padding: 20px;
  }
}

Unfortunately, I encountered an issue with build optimization when trying to inline "critical css", resulting in an "Index html generation failed" error.

To resolve this, I disabled it in angular.json

"architect": {
  "build": {
     ...
     "optimization": {
       "scripts": true,
       "styles": {
         "minify": true,
         "inlineCritical": false
       },
       "fonts": true
   }
  }
}

This also has implications for importing bootstrap

*, :after, :before {
    box-sizing: border-box;
}

now becomes

my-component-tag *, my-component-tag :after, my-component-tag :before {
    box-sizing: border-box;
}

and no longer disrupts the hosting website.

If you wish to maintain your global styles.scss "as is", you can create a webcomponent.scss file

my-component-tag {
 @import "styles";
}

and utilize it in the build configuration:

"architect": {
  "build": {
     ...
     "configurations": {
       "webcomponent": {
         "styles": ["src/webcomponent.scss"],
       }
     }

   }
  }
}

Answer 4

My approach involves utilizing scss/sass in a unique way.

In my (global) styles.scss file, I have organized my global styles within the webcomponents "tag". This method seems to be effective even with nested imports, such as those for bootstrap.

https://sass-lang.com/documentation/at-rules/import#nesting

my-component-tag {
  @import '../../../libs/some.scss';
  
  body {
    margin: 0px;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }
  
  .modal-content {
    padding: 20px;
  }
}

Unfortunately, I encountered an issue with build optimization when trying to inline "critical css", resulting in an "Index html generation failed" error.

To resolve this, I disabled it in angular.json

"architect": {
  "build": {
     ...
     "optimization": {
       "scripts": true,
       "styles": {
         "minify": true,
         "inlineCritical": false
       },
       "fonts": true
   }
  }
}

This also has implications for importing bootstrap

*, :after, :before {
    box-sizing: border-box;
}

now becomes

my-component-tag *, my-component-tag :after, my-component-tag :before {
    box-sizing: border-box;
}

and no longer disrupts the hosting website.

If you wish to maintain your global styles.scss "as is", you can create a webcomponent.scss file

my-component-tag {
 @import "styles";
}

and utilize it in the build configuration:

"architect": {
  "build": {
     ...
     "configurations": {
       "webcomponent": {
         "styles": ["src/webcomponent.scss"],
       }
     }

   }
  }
}

What is the best way to contain the global CSS of an Angular app within an exported web component?

Answer №1

Answer №2

Similar questions

Concealing and Revealing Bootstrap Grid Elements

Guide on achieving a full scrollable parent by positioning a pseudo-element absolutely

Filtering object properties from arrays in Angular HTML can be achieved using various methods such as

Angular 6 CSS spacing dilemmas

Enabling or Disabling CSS Background Clip Support for Internet Explorer

Conceal flexbox item depending on neighboring element dimensions or content

Customize Typography style variations in Material-UI version 5

How can I toggle the visibility of an item on click using jQuery?

Integrating Vimeo videos into Angular applications

What is the best way to eliminate a vertical line from an HTML table?

An image overlaying a background design featuring a navigation bar and company logo

Insert Angular HTML tag into TypeScript

Discover the Location and Sign Up for Angular2+ Service

An issue with glob patterns in Angular's ngsw-config.json configuration

Adjusting the Image Size in Web Browser Control to Match Device Width on WP8

Explore the Filter List without being affected by the arrangement of words or the level of search precision

Tips for executing an operation based on multiple observables in Angular

I am looking to create a div that can consistently refresh on its own without needing to refresh

Utilizing CSS to adjust the position of a background image at its starting point

Exploring the World of Design in Next JS