'Prevent global CSS being applied a component in Angular 5

In .angular-cli.json, I got some global styles:

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
        "styles.scss"
    ],

But I don't want any of them being applied to a specific component - is it achievable?

EDIT 1:
Unfortunately, overriding the CSS style in the component style won't work because the HTML in the template of the component is fetched from a Web API backend - I guess I can't realistically override every possible class/selector?

cssangulardomangular-componentsvirtual-domnode.jselectronv8chromium-embedded


Solution 1:[1]

Using component styles For every Angular component you write, you may define not only an HTML template, but also the CSS styles that go with that template, specifying any selectors, rules, and media queries that you need.

One way to do this is to set the styles property in the component metadata. The styles property takes an array of strings that contain CSS code. Usually you give it one string, as in the following example:

@Component({
  selector: 'app-root',
  template: `
    <h1>Test Text</h1>      
  `,
  styles: ['h1 { font-weight: normal; }']
})
export class AppComponent {
/* . . . */
}

styleUrls
One or more URLs for files containing CSS stylesheets to use in this component.

styleUrls: string[]

styles
One or more inline CSS stylesheets to use in this component.

styles: string[]

Solution 2:[2]

You can use the :not selector in your global CSS.

You'd have to play around with it to get the desired behaviour but it should be something like this:

h1:not(.my-specific-class) {
  font-size: 3rem;
}

Solution 3:[3]

You can use angular built in shadowDom API from view encapsulation. Which will make your component elements loaded inside a separate DOM tree so global css wont affect your component elements.

   @Component({
  selector: 'app-root',
  template: `
    <h1 class="head-app">Test Heading</h1>      
  `,
  styles: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class AppComponent {
/* . . .

Solution 4:[4]

Answering the second question - NodeJs supplements Chromium engine, not substitutes it in Electron. Please go through this great article to get an idea of process communication within the framework. In a nutshell - there are 2 major players over there:

  • Main (or "host") process - running on NodeJs with access to OS functionality, responsible for windows orchestration and providing access to native functions
  • Renderer process - actual Chromium instance with additional bindings allowing to "speak" to Main process

On differences between the frameworks - this is a broad question, in general they cover the same needs and most of differences are on tech side:

  • Dev Tooling (Dev Language, APIs, SDKs, testing frameworks)
  • Supported platforms
  • Packaging and distribution options
  • Performance and memory management
  • Dev community adoption
  • tbc

There is no clear "winner" or "looser" over there. Each of items above (and some on top) require additional research, keeping in mind your user base, dev team experience with relevant tech stack, application complexity, etc

Solution 5:[5]

CEF

CEF is one of the first solutions that wrapped Chromium functionality and provided an API that can be used by third-party applications. Chromium is a standalone desktop application. CEF represents it as a framework. Since Chromium is written using C++, CEF represents a framework for C++ developers, but there are many ports for Java, .NET, and Python languages.

The main purpose of CEF is to let C++ developers embed Chromium into their C++ cross-desktop application and access Chromium features like rendering (including off-screen), DOM, V8, PDF Viewer, Printing, Network requests/responses, cookies, etc.

The examples of such applications are Steam, Spotify, Adoby Brakets, and more.

Electron

Taking into account that CEF and Electron source codes are very similar, I can assume that:

Electron == CEF + Node.js

The main purpose of Electron is to let JavaScript developers build cross-platform desktop applications on top of Chromium. Each window in Electron app represents a Chromium window that renders specific web page or HTML. The GUI of Electron apps is built using HTML, CSS, and JavaScript. The logic (backend) is written using Node.js.

Which one to use?

CEF is for you if you are a C++ developer. It allows you both embedding Chromium into an existing C++ desktop application and creating Electron C++ cross-desktop applications.

Electron is for you if you are a JavaScript developer who wants to create a cross-desktop application with HTML, CSS, JavaScript GUI and you don't want to learn more efficient technologies and frameworks such as Qt, Gtk, Cocoa, Java Swing/JavaFX/SWT, Flutter, etc.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mohammad Daliri
Solution 2 Chrillewoodz
Solution 3
Solution 4
Solution 5 Vladimir

Related Questions