Custom pseudo-elements

The author of a binding can define custom pseudo-elements to provide a way for the page author (i.e. the user of the binding) to style any presentational aspects of the binding which do not have a corresponding bound element.

The author of a binding can define custom pseudo-elements to provide a way for the page author (i.e. the user of the binding) to style any presentational aspects of the binding which do not have a corresponding bound element.

Note that the styles associated with a custom pseudo-element will only have an impact on the page if they are moved by the binding template onto a real element. If they remain associated with a custom pseudo-element after binding processing has been completed, then they are discarded.

Defining custom pseudo-elements

Let's assume that a binding for a folding item component is represented using the following bound elements:

<cool:folding-item>
  <cool:summary>Summary of an article, e.g. the title</cool:summary>
  <cool:details>
    <p>Detailed contents of the article.</p>
  </cool:details>
</cool:folding-item>

The component allows page authors to include hidden content that is displayed when the user selects an action. When folded, only the summary is displayed. When unfolded, the hidden content is displayed. Users can unfold/fold the component by clicking on the summary line. The binding author may want to have a dedicated button to activate the folding item rather than use the summary line. The button may also provide an indication as to whether the item is currently opened or closed. As there is no element in the previous markup that corresponds to the button, the binding author must define the binding so that the ::cool|toggle pseudo-element can be applied to the cool:folding-item element. The author also needs to define the following dynamic property to represent the open state of the folding item and document that its pseudo-classes can be applied to the cool:folding-item, cool:summary elements and the ::cool|toggle pseudo-element.

@namespace cool "http://www.cool-components.com/xmlns/library";

@ui|dynamic-property {
  name: cx-open;
  type: boolean;
  cool|closed: false;
  cool|open: true;
}

If page authors who use the binding want to change the default padding around the button, then they can add something like this to their themes:

cool|folding-item::cool|toggle {
  padding: 4px;
}

If they want to change the content of the button in each state, then they can add something like this to their themes:

cool|folding-item::cool|toggle:cool|open {
  content: mcs-component-url('open.mimg');
}
cool|folding-item::cool|toggle:cool|closed {
  content: mcs-component-url('closed.mimg');
}

Related topics