Skip to main content

Components

Mimeeq Embed provides few components which you can use to place different embeds on your web application.

Web components​

Web Components are a browser feature that provides a standard component model for the Web. Thanks to that you can use it just like standard HTML elements and without need for any additional code.

Thanks to that these components can be created once and then used in any application without need for any additional code.

Mimeeq Embed comes with following components:

  • mmq-embed - main component. It is used to render all embeds related to product like Product List, Favourites List or Single Configurator.
  • mmq-auth - authentication related component. By adding it to your DOM it will load authentication related logic and allow for displaying authorization forms.

Shadow DOM​

One of the most important parts of web components is Shadow DOM. It's responsible for encapsulation of structure, styles and behaviour from other code on the page so that different parts do not clash or affect one another.

But it also comes with cost. In result some customization is harder or impossible to be done. One of such things are styles. To customize parts of shadow DOM you need to either use CSS variables used by component or reach for CSS pseudo-element ::part() to style elements with matching part attribute.

When you want to query an element inside web component, you must use el.shadowRoot.querySelector(). This is because all the DOM inside web component is in a shadowRoot that the shadow DOM creates.

To learn more about shadow DOM, click here.