Skip to main content

Element Styling

Introduction​

Mimeeq Web Components are built using Shadow DOM, providing encapsulation of styles and functionality. To allow for easier customization and styling of these components, we expose various parts that can be targeted and styled using CSS.

The ::part pseudo-element selectors enable developers to style individual parts of Mimeeq Web Components without affecting other parts or the surrounding page. By leveraging these selectors effectively, you can achieve consistent and visually appealing designs across your application.

In the following sections, we'll explore how to target specific parts of Mimeeq Web Components and demonstrate how to style them to meet your design requirements.

Styling Mimeeq Web Components with Parts​

Mimeeq Web Components offer a wide range of customization possibilities through the use of parts. By targeting specific parts within our components, you can tailor the appearance of the embed to seamlessly integrate with your webpage's design language. In this section, we'll explore how you can leverage parts to style various Mimeeq components and achieve your desired look and feel.

Components Accessible for Styling​

While most Mimeeq Web Components can be styled using parts, some commonly targeted components include:

  • mmq-variant-ui: This component serves as the main container for displaying product variants and customizations.
  • mimeeq-modular-ui: Used for modular UI elements such as headers, buttons, and summary boxes.
  • mimeeq-tabs: Provides tabbed navigation functionality.
  • mimeeq-related-products: Displays related products or recommendations.
  • mmq-dialog: Used for displaying dialog boxes or pop-up messages.
  • mmq-basket: Handles shopping cart functionality.
  • mmq-button: Represents various buttons within the UI.
  • mmq-tooltip: Displays contextual information or tooltips.
  • mmq-ar-preview: Offers augmented reality preview capabilities.

Purpose of Styling with Parts​

The primary purpose of styling Mimeeq components with parts is to align the appearance of the embed with the styling of your webpage. By customizing aspects such as corner rounding, spacing, padding, and positioning, you can seamlessly integrate Mimeeq components into your existing design language. This level of customization ensures a cohesive user experience across your website.

Overview of Targetable Parts​

Mimeeq Web Components expose numerous parts that can be targeted for styling. These parts often represent repetitive elements like containers, buttons, icons, and text. However, depending on the use case, parts may have different names and hierarchical structures. While it's challenging to list all available parts due to their extensive nature, they can typically be accessed through exportparts and span across multiple nested components.

Best Practices​

While there are no strict rules for styling with parts, consider the following best practices:

  • Consistency: Maintain consistency in your styling across different components to ensure a cohesive design.
  • Hierarchy: Understand the hierarchical structure of components and how parts are nested within them to apply targeted styling effectively.
  • Testing: Regularly test your styled components across different browsers and devices to ensure consistent rendering and functionality.

Example​

Here's an example of CSS styling applied to Mimeeq components using parts:

.mmq-variant-ui::part(finish-btn),
.mmq-mobile-tabs::part(finish-btn) {
  border: 1px solid var(--mmq-accent-main);
  border-radius: 0;
  text-transform: uppercase;
  background: transparent;
  color: black;
  flex: unset;
  width: auto;
  padding: 10px 16px;
  font-weight: 400;
}

.mmq-variant-ui::part(block-header) {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--mmq-primary-main, #2e3341);
  text-transform: initial;
  text-decoration: underline;
}

.mmq-variant-ui::part(radio-numbers-option),
.mmq-mobile-tabs::part(radio-numbers-option) {
  border: 0;
  padding: 10px 4px;
  max-width: unset;
  min-width: unset;
  --mmq-radio-number-option-text-decoration-active: underline;
  text-underline-offset: 4px;
  font-size: 16px;
}

.mmq-variant-ui::part(qty-box),
.mmq-mobile-tabs::part(qty-box) {
  border-radius: 0;
  --mmq-grey-600: #000;
  --mmq-typography-hint: #000;
}

.mmq-variant-ui::part(item-button),
.mmq-variant-ui::part(side-panel-group) {
  --mmq-font-size-regular: 16px;
}

.mmq-variant-ui::part(side-panel-group-item-button-expanded),
.mmq-mobile-tabs::part(group-item-button-expanded) {
  text-decoration: underline;
  text-underline-offset: 4px;
  --mmq-border-light: transparent;
  --mmq-common-black: transparent;
}
.mmq-variant-ui::part(components-mapper),
.mmq-mobile-tabs::part(components-mapper) {
  padding-left: 2px;
  padding-right: 2px;
}

.mmq-mobile-tabs::part(groups) {
  padding: 0 16px;
  --mmq-item-button-padding: 8px 0;
  --mmq-item-button-padding-first: 16px 0 8px;
}

Further Reading​

For more detailed information on CSS Shadow Parts, please refer to the following resources on MDN:

Targeting Reset Styles Without Breaking Mimeeq Web Components​

When applying global reset styles to your web page, it's essential to ensure that these resets do not interfere with the styles of Mimeeq web components. This is especially important when working with solutions like Mimeeq Embed, which use Shadow DOM and custom elements. Below, we propose two methods to target reset styles while excluding Mimeeq web components.

Method 1: Using Mimeeq Web Components .hydrated Class​

We automatically adds the .hydrated class to all custom elements once they are fully loaded. By using this class, you can exclude our components from your reset styles efficiently.

/* Reset styles for built-in elements only, excluding Mimeeq web components */
*:not(.hydrated),
*:not(.hydrated)::before,
*:not(.hydrated)::after {
  margin: 0;
  box-sizing: inherit;
}

Method 2: Using Attribute Selectors for Generic Custom Elements​

For a more generic approach that works with any custom elements (not just Mimeeq), you can use attribute selectors. Custom elements always contain a dash ("-") in their tag names, which can be used to exclude them.

/* Reset styles for built-in elements only, excluding all custom web components */
:where(*:not(:defined)):not(:is(*-*)),
:where(*:not(:defined)):not(:is(*-*))::before,
:where(*:not(:defined)):not(:is(*-*))::after {
  margin: 0;
  box-sizing: inherit;
}

Applying These Styles​

Include one of the above methods in your global CSS file to ensure your reset styles apply only to built-in HTML elements and do not affect Mimeeq web components. This will maintain the integrity of your Mimeeq Configurator' styles while ensuring a consistent baseline for built-in elements.

Example Usage​

Here's an example of how you might include these reset styles in your global CSS:

/* Global CSS */

/* Method 1: Using .hydrated Class */
*:not(.hydrated),
*:not(.hydrated)::before,
*:not(.hydrated)::after {
  margin: 0;
  box-sizing: inherit;
}

/* Method 2: Using Attribute Selectors for Generic Custom Elements */
/* Uncomment the following block if using the generic method */
/*
:where(*:not(:defined)):not(:is(*-*)),
:where(*:not(:defined)):not(:is(*-*))::before,
:where(*:not(:defined)):not(:is(*-*))::after {
    margin: 0;
    box-sizing: inherit;
}
*/

Choose the method that best suits your development environment and requirements. For projects which doesn't use any other web components but Mimeeq, the .hydrated class method is recommended for its simplicity and performance efficiency.