I have an angular elements application that contains a single component, app.component.ts and uses an external .scss for its styling
I have set the viewEncapsulation of the app.component as follows:
@Component({
selector: 'app-form',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
encapsulation: ViewEncapsulation.ShadowDom, // Emulated | Native | None | ShadowDom,
changeDetection: ChangeDetectionStrategy.OnPush // Default | OnPush,
})
However, when I build the app and run it, I notice that both the runtime inline styles that are dynamically added as well as the default inline styles that are loaded on the app component's init are duplicated both under the #ShadowRoot as well as in the <head> of the index.html host element that contains the custom component <app-form>
Perhaps I'm missing something in the angular.json to prevent the styles from redundantly writing to the host element?
// angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"myapp-forms": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/myapp-forms",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"allowedCommonJsDependencies": [
"@swimlane/dragula",
"ajv",
"brace/mode/javascript",
"brace/mode/json",
"lodash"
],
"styles": [],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2.5mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "300kb",
"maximumError": "300kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "myapp-forms:build"
},
"configurations": {
"production": {
"browserTarget": "myapp-forms:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "myapp-forms:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "myapp-forms:serve"
},
"configurations": {
"production": {
"devServerTarget": "myapp-forms:serve:production"
}
}
}
}
}},
"defaultProject": "myapp-forms"
}