Shadow DOM

content is up-to-date for ccm v23.0.0

Damit CSS innerhalb des Webseitenbereichs einer ccm-basierten Webkomponente gekapselt ist, nutzt ccm den vom W3C standardisierten Shadow DOM. Der Webseitenbereich einer eingebetteten Komponente hat durch ccm immer initial den folgenden DOM-Aufbau:

- root
  - shadow
    - element

root ist das Kind-Element des zugewiesenen Webseitenbereichs (instance.root). shadow ist der darin angelegte Shadow DOM. element ist der Webseitenbereich, dessen Inhalt dann von der Komponente gestaltet wird (instance.element).

Seit ccm v23.0.0 kann über die Instanzkonfiguration über die Eigenschaft shadow der Shadow DOM-Modus angegeben werden.

const config = { "shadow": "closed|open|none" }

Default is closed. Bei none wird gar kein Shadow DOM angelegt. Dann enthält der root direkt das element.