SiShadowRootDirective documentation¶
[siShadowRoot]This directive is intended to be used in applications that do NOT load element styles in the root HTML element. So typically module federation, single SPA apps or apps that bootstrap element manually in a shadow root.
This directive will ensure that overlays created within this shadow root will have the correct styles applied. It does this by creating a new shadow root in the document body and copying the styles from this shadow root to new one.
With that approach, we can ensure that overlay can span the entire screen without being limited to the current shadow root.
To use this directive, add it to the component / element which creates the shadow root which holds the element styles.
Example:
@Component({
selector: 'app-root',
encapsulation: ViewEncapsulation.ShadowDom,
hostDirectives: [SiShadowRootDirective],
stylesUrls: ['element-styles.scss'],
template: `<si-element-component />`
})
export class AppComponent { }
Attributes and Methods¶
| Name | Type | Default | Description |
|---|---|---|---|
| getContainerElement() ¶ | () => HTMLElement | This method returns the overlay container element. It will lazily create the element the first time it is called to facilitate using the container in non-browser environments. Returns the container element | |
| ngOnDestroy() ¶ | () => void | A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed. | |
| ɵfac ¶ | unknown | ||
| ɵprov ¶ | ɵɵInjectableDeclaration<OverlayContainer> |
Types Documentation¶
No types to document for items on this page.
Except where otherwise noted, content on this site is licensed under MIT License.