#219 Isolate styling with shadow dom

README.md

@@ -17,6 +17,7 @@ For more information on why this is necessary, see the section on [Line Endings]
 exposed as a web component `tech-carbon-estimator`. The component takes the follow optional input:
 
 - `extra-height` - this is extra height to be taken into account when calculating the height of the chart. E.g. the height of a header/footer that will be visible on the page.
+- `assets-base-path` - this is the path to the folder which contains the styles.css file in the bundle, usually within an assets folder. e.g. 'assets/'
 
 You will need to import the following files to use the tech-carbon-estimator:
 

angular.json

@@ -21,8 +21,23 @@
             "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/favicon.ico"],
-            "styles": ["src/styles.css", "src/sl-styles.css"],
-            "scripts": []
+            "styles": [
+              {
+                "input": "src/tce-global-styles.css",
+                "bundleName": "tce-global-styles",
+                "inject": true
+              },
+              {
+                "input": "src/styles.css",
+                "bundleName": "styles",
+                "inject": false
+              },
+               {
+                "input": "src/sl-styles.css",
+                "bundleName": "styles",
+                "inject": false
+              }
+            ]
           },
           "configurations": {
             "production": {
@@ -43,7 +58,33 @@
             "npm-package": {
               "index": {"input": "src/package-index.html", "output": "index.html"},
               "assets": [],
-              "styles": ["src/styles.css", "src/package-styles.css"]
+              "styles": [
+              {
+                "input": "src/tce-global-styles.css",
+                "bundleName": "tce-global-styles",
+                "inject": true
+              },
+              {
+                "input": "src/styles.css",
+                "bundleName": "styles",
+                "inject": false
+              },
+              {
+                "input": "src/package-styles.css",
+                "bundleName": "styles",
+                "inject": false
+              }
+              ],
+              "optimization": {
+                  "scripts": true,
+                  "styles": {
+                    "minify": true,
+                    "inlineCritical": false
+                  },
+                  "fonts": true
+                },
+                "extractLicenses": true,
+                "sourceMap": false
             },
             "development": {
               "optimization": false,

src/app/carbon-estimation-treemap/carbon-estimation-treemap.component.html

@@ -2,26 +2,28 @@
   <span class="tce-chart-total-colour"></span>
   <span class="apexcharts-legend-text" id="tce-chart-total-text">Total Emissions Estimate {{ totalEmissions() }}</span>
   <!--span><button (click)="toggleMassPercentages()">toggle</button></span-->
-  <span class="tce-switch-container" *ngIf="shouldShowUnitsSwitch()">
-    <label class="tce-switch-label" [class.tce-switch-active]="isMass()">
-      <input
-        type="radio"
-        name="massPercentSwitch"
-        [checked]="isMass()"
-        (change)="isMass.set(true)"
-        class="tce-switch-input" />
-      kg
-    </label>
-    <label class="tce-switch-label" [class.tce-switch-active]="!isMass()">
-      <input
-        type="radio"
-        name="massPercentSwitch"
-        [checked]="!isMass()"
-        (change)="isMass.set(false)"
-        class="tce-switch-input" />
-      %
-    </label>
-  </span>
+  @if(shouldShowUnitsSwitch()) {
+    <span class="tce-switch-container">
+      <label class="tce-switch-label" [class.tce-switch-active]="isMass()">
+        <input
+          type="radio"
+          name="massPercentSwitch"
+          [checked]="isMass()"
+          (change)="isMass.set(true)"
+          class="tce-switch-input" />
+        kg
+      </label>
+      <label class="tce-switch-label" [class.tce-switch-active]="!isMass()">
+        <input
+          type="radio"
+          name="massPercentSwitch"
+          [checked]="!isMass()"
+          (change)="isMass.set(false)"
+          class="tce-switch-input" />
+        %
+      </label>
+    </span>
+  }
 </div>
 <figure [attr.aria-label]="emissionAriaLabel()" tabindex="0">
   <apx-chart

src/app/carbon-estimation/carbon-estimation.component.html

@@ -30,9 +30,10 @@ <h2 class="tce:text-2xl">Estimations</h2>
       </p>
     </div>
   </expansion-panel>
-  <div class="tce:flex tce:items-center ">
+  <div class="tce:flex tce:items-center tce:pt-2">
     <div >
       <button
+        type="button"
         [disabled]="!carbonEstimation()"
         class="tce-export-button"
         (click)="toggleExportMenu()"
@@ -42,11 +43,11 @@ <h2 class="tce:text-2xl">Estimations</h2>
         Export ▼
       </button>
 
-      <div
-        *ngIf="isExportMenuOpen"
-        class="tce:top-full tce:left-0 tce-mt-2 tce:bg-white tce:shadow-lg tce:rounded tce:z-50"
-        (click)="$event.stopPropagation()"
-      >
+      @if(isExportMenuOpen) 
+      {
+        <div class="tce:top-full tce:left-0 tce-mt-2 tce:bg-white tce:shadow-lg tce:rounded tce:z-50"
+          (click)="$event.stopPropagation()"
+        >
         <ul class="tce-export-menu">
           <li>
             <a [href]="carbonEstimationDownloadUrl" download="carbon-estimation.json" tce-external-link>
@@ -63,12 +64,13 @@ <h2 class="tce:text-2xl">Estimations</h2>
             </a>
           </li>
           <li>
-            <button (click)="handlePDFClick()" class="tce-export-button">
+            <button type="button" (click)="handlePDFClick()" class="tce-export-button">
               Export PDF
             </button>
           </li>
         </ul>
       </div>
+    }
     </div>
     <span class="tce-switch-container">
       <label class="tce-switch-label" [class.tce-switch-active]="isAnnual()">
@@ -92,11 +94,11 @@ <h2 class="tce:text-2xl">Estimations</h2>
       </span>
 
       <button
+        type="button"
         aria-describedby="annualMonthlyInfo"
         title="Monthly = raw Annual ÷ 12"
         class="tce:size-[44px] tce:flex tce:items-center tce:justify-center"
       >
-
         <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" role="img">
           <circle cx="12" cy="12" r="10"></circle>
           <line x1="12" y1="8" x2="12.01" y2="8"></line>
@@ -125,10 +127,11 @@ <h2 class="tce:text-2xl">Estimations</h2>
       <carbon-estimation-table [carbonEstimation]="estimate()" [shouldShowSvgs]="true"></carbon-estimation-table
     ></tab-item>
   </tabs>
+  @if(isModalVisible) {
   <export-modal
-    *ngIf="isModalVisible"
     (close)="hideModal()"
     [carbonEstimation]="estimate()"
     [inputValues]="inputValues()"
-  ></export-modal>
+  />
+  }
 </div>

src/app/carbon-estimation/carbon-estimation.component.ts

@@ -152,6 +152,11 @@ export class CarbonEstimationComponent implements OnInit, OnDestroy {
     // for our purposes monthly estimate is just the annual divided equally
     // beteween 12 months
 
+    // if no estimation, return undefined
+    if(this.carbonEstimation() == null) {
+      return undefined;
+    }
+
     const copy = JSON.parse(JSON.stringify(this.carbonEstimation()));
 
     copy.values.totalEmissions = copy.values.totalEmissions/12;

src/app/tech-carbon-estimator/tech-carbon-estimator.component.html

@@ -1,4 +1,4 @@
-<div id="techCarbonEstimator" class="tce:flex tce:flex-col tce:h-full">
+<div id="techCarbonEstimator" class="tce:p-4 tce:flex tce:flex-col tce:h-full tce:dark:bg-slate-800 tce:dark:text-slate-50">
   <h1 class="tce:text-3xl tce:mb-6">Technology Carbon Estimator</h1>
   <div class="tce:flex tce:w-full tce:grow tce:flex-wrap tce:lg:flex-nowrap">
     <div class="tce:w-full tce:lg:w-1/2 tce:pb-4 tce:lg:pb-0 tce:lg:pr-4">

src/app/tech-carbon-estimator/tech-carbon-estimator.component.spec.ts

@@ -90,8 +90,8 @@ describe('TechCarbonEstimatorComponent', () => {
   it('should show the form by default', () => {
     fixture.detectChanges();
 
-    const formElement = fixture.nativeElement.querySelector('carbon-estimator-form');
-    const assumptionsElement = fixture.nativeElement.querySelector('assumptions-and-limitation');
+    const formElement = fixture.nativeElement.shadowRoot.querySelector('carbon-estimator-form');
+    const assumptionsElement = fixture.nativeElement.shadowRoot.querySelector('assumptions-and-limitation');
 
     expect(formElement).toBeTruthy();
     expect(assumptionsElement).toBeFalsy();

src/app/tech-carbon-estimator/tech-carbon-estimator.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { CarbonEstimatorFormComponent } from '../carbon-estimator-form/carbon-estimator-form.component';
 import { CarbonEstimationComponent } from '../carbon-estimation/carbon-estimation.component';
 import { CarbonEstimation, EstimatorValues } from '../types/carbon-estimator';
@@ -24,9 +24,13 @@ import { TabItemComponent } from '../tab/tab-item/tab-item.component';
     TabItemComponent,
   ],
   templateUrl: './tech-carbon-estimator.component.html',
+
+  // Protect against style interference by the hosting page
+  encapsulation: ViewEncapsulation.ShadowDom
 })
-export class TechCarbonEstimatorComponent {
+export class TechCarbonEstimatorComponent implements OnInit {
   @Input() public extraHeight?: string;
+  @Input({ alias: 'assets-base-path' }) public assetsBasePath?: string;
 
   public formValue: EstimatorValues | undefined;
   public carbonEstimation: CarbonEstimation | null = null;
@@ -35,9 +39,40 @@ export class TechCarbonEstimatorComponent {
 
   constructor(
     private estimationService: CarbonEstimationService,
-    private changeDetector: ChangeDetectorRef
+    private changeDetector: ChangeDetectorRef,
+    private ref: ElementRef
   ) {}
 
+  ngOnInit() {
+    this.insertShadowStylesLink();
+  }
+
+  private insertShadowStylesLink() {
+    // Reasons for this approach:
+    // 1. Angular global injection would insert the tag in the page root, so we disabled it.
+    // 2. Component `styleUrl` wouldn't allow us to vary stylesheets based on build configurations.
+
+    let stylesLink = this.createShadowStylesLink('styles.css');
+    let googleFontsLink = this.createShadowStylesLink('https://fonts.googleapis.com/icon?family=Material+Icons+Outlined');
+
+    this.ref.nativeElement.shadowRoot.appendChild(googleFontsLink);
+    this.ref.nativeElement.shadowRoot.appendChild(stylesLink);
+  }
+
+  private createShadowStylesLink(styleHref: string) {
+
+    const isAbsoluteUrl = styleHref.startsWith('http://') || styleHref.startsWith('https://');
+    const basePath = this.assetsBasePath && !isAbsoluteUrl ? this.assetsBasePath.replace(/\/?$/, '/')  : '';
+
+    const stylesPath = `${basePath}${styleHref}`;
+
+    let stylesLink = document.createElement('link');
+    stylesLink.rel = 'stylesheet';
+    stylesLink.type = 'text/css';
+    stylesLink.href = stylesPath;
+    return stylesLink;
+  }
+
   public handleFormSubmit(formValue: EstimatorValues) {
     this.formValue = formValue;
     this.carbonEstimation = this.estimationService.calculateCarbonEstimation(this.formValue);

src/index.html

@@ -8,9 +8,14 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
     <link rel="preconnect" href="https://use.typekit.net" crossorigin />
     <link href="https://use.typekit.net/fjg7yrm.css" rel="stylesheet" />
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
   </head>
   <body>
-    <main class="tce:pt-4 tce:md:pb-4">
+    <main>
       <noscript
         >Javascript appears to be disabled - unfortunately the estimator requires it to be enabled to function.</noscript
       >

src/package-index.html

@@ -6,8 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
   </head>
-  <body class="tce:m-0 tce:dark:bg-slate-800 tce:dark:text-slate-50">
+  <body>
     <main>
       <noscript
         >Javascript appears to be disabled - unfortunately the estimator requires it to be enabled to function.</noscript

src/sl-styles.css

@@ -1,18 +1,20 @@
 @import "tailwindcss" prefix(tce);
 
-:root {
-  --primary-charcoal: #252525;
-  --primary-turquoise: #2bb3bb;
-  --primary-pink: #c41565;
-  --primary-orange: #ef8547;
-  --secondary-yellow: #f8be4f;
-  --secondary-green: #7fc45f;
-  --secondary-turquoise: #dff0f3;
-  --secondary-pink: #f9eaf1;
-  --secondary-orange: #fdede4;
-  --secondary-light-yellow: #fef9ef;
-  --secondary-light-green: #f2faef;
-  color: var(--primary-charcoal);
+@layer theme {
+  :root, :host {
+    --primary-charcoal: #252525;
+    --primary-turquoise: #2bb3bb;
+    --primary-pink: #c41565;
+    --primary-orange: #ef8547;
+    --secondary-yellow: #f8be4f;
+    --secondary-green: #7fc45f;
+    --secondary-turquoise: #dff0f3;
+    --secondary-pink: #f9eaf1;
+    --secondary-orange: #fdede4;
+    --secondary-light-yellow: #fef9ef;
+    --secondary-light-green: #f2faef;
+    color: var(--primary-charcoal);
+  }
 }
 
 .tce-note {
@@ -26,9 +28,12 @@ input {
 }
 
 .tce-button-calculate, .tce-button-reset, .tce-button-assumptions, .tce-button-close {
-  color: var(--primary-charcoal);
   border-color: var(--primary-turquoise);
-  @apply tce:rounded-none tce:border-b-[3px] tce:bg-transparent tce:p-0.5;
+  @apply tce:rounded-sm;
+}
+
+.tce-button-calculate {
+  @apply tce:text-white;
 }
 
 .tce-button-calculate:hover, .tce-button-reset:hover, .tce-button-assumptions:hover, .tce-button-close:hover {
@@ -39,4 +44,9 @@ input {
 .tce-active-tab, .tce-active-tab:hover {
   border-color: var(--primary-turquoise);
   @apply tce:cursor-default;
+}
+
+.tce-switch-label.tce-switch-active {
+  background-color: var(--primary-turquoise);
+  color: white;
 }