Styling Components

EF elements are built with using Shadow DOM. Shadow DOM encapsulates internal styles and component structures so they don't leak out, or get interfered with by application-level styles.

While component's internal styles are protected, applications can override any styles that are available at host scope by using the normal CSS selector.

<ef-email-field class="login-input"></ef-email-field>
<ef-password-field class="login-input"></ef-password-field>

<style>
  .login-input {
    width: 150px;
    margin-bottom: 5px;
  }
</style>

CSS Variables

Some EF elements provide CSS Variables which allows application to modify its internal styles without hacking into Shadow DOM. CSS Variables are also used to style canvas components. Available CSS variables are in API document of each component.

<ef-led-gauge red-blue-scale></ef-led-gauge>

<style>
  ef-led-gauge[red-blue-scale] {
    --center-right-segment-color: rgba(60, 60, 200, 0.65);
    --right-segment-color: rgba(60, 60, 200, 1);
  }
</style>

IE Support

Natively, IE11 does not support CSS variables. However, applications can work around this by using polyfills offered as part of @refinitiv-ui/polyfills.

npm i @refinitiv-ui/polyfills

Imports polyfills and wraps CSS variables with shady-css-scoped tag.

import '@refinitiv-ui/polyfills/minimals';

<shady-css-scoped>
  <style>
    ef-led-gauge[red-blue-scale] {
      --center-right-segment-color: rgba(60, 60, 200, 0.65);
      --right-segment-color: rgba(60, 60, 200, 1);
    }
  </style>
</shady-css-scoped>

<ef-led-gauge red-blue-scale></ef-led-gauge>

For Single Page Applications, the <shady-css-scoped> tag must be placed at the root of the application i.e. index.html.