ngx-shadow-class
v0.0.3
Published
Directive to inject styles into the shadow components
Downloads
12
Maintainers
Readme
NgxShadowClass
Will help you to overwrite css in shadow dom components
The library provides simple directive for Angular which does the css injection
Installation
npm i --save ngx-shadow-class
- Import
ShadowClassModule
into yourapp.module
or other shared module - Add
shadow-class="my-class"
to inject css into the shadow element
What does it do?
- It will receive list of classes which need's to be injected into the shadow DOM style
- It will take all style sheets of the document and search for the
<components_tag_name>.<style from received list>
and inject the body into the styles of the shadow DOM ashost:(.<style from received list>) ....
How to create style?
Important to create style by specifying component tag and class name.
Use /deep/
if the style is in the host:
ex below
Ex: ion-toggle.my-class-name ...
Example
The example is provided based on the Ionic 4.0.x project
home.page.html
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-toggle class="test-class" shadow-class="test-class test-class-global"></ion-toggle>
</ion-content>
home.page.scss (for test-class
)
:host {
/deep/ ion-toggle {
&.test-class {
.toggle-inner {
width: 10px;
}
button {
z-index: 9999;
}
}
}
}
app.component.scss or other global file (for test-class-global
)
ion-toggle {
&.test-class-global {
.toggle-inner {
width: 10px;
}
}
}
Will add following styles into the shadow dom component
- :host(.test-class-global) .toggle-inner { width: 10px; }
- :host(.test-class) .toggle-inner { width: 10px; }
- :host(.test-class) button { z-index: 9999; }