Styling ASQ Elements

Styling ASQ Elements

ASQ and Web Components

ASQ Elements are implemented using Web Components and the Polymer library. They feature Shadow DOM which offers very nice style encapsulation but also a different way to style nodes that are in the Shadow DOM (also called local DOM in Polymer lino). Regular CSS rules will mostly work for initial and inherited properties.

Whenever a property is not inherited or is overwritten then you need to use CSS-variables or CSS Mixins(just a Polymer technology for now). Notice that CSS variables are declared by the author of the element. You can only use it.

To find the available styling options you need to consult the documentation of the element you’re interested in. Here are some resources on how CSS variables work in Polymer

• https://www.polymer-project.org/1.0/start/first-element/step-5
• https://www.polymer-project.org/1.0/docs/devguide/styling

Example

Suppose we want the output section of every <asq-sqlite-q> element to have font-size: 0.65em and background: white:

1
2
3
4
5

:root{
  --asq-sqlite-q-output:{
    font-size: 0.65em;
    background: white;
  };

Now we want the editor container of the inside slide with id=slide5 to have flex:3.

1
2
3
4

#slide5{
  --asq-highlight-q-editor-container:{
    flex: 3;
  };

In both these examples we use CSS mixins.