Skip to content

Styling

Jump to bottom
Amirhossein Alibakhshi edited this page Jul 7, 2024 · 3 revisions

The Custom Element Manifest Viewer uses CSS Shadow Parts to provide a flexible and modular way to style its internal elements. CSS Parts allow you to apply styles to the internals of a shadow DOM component, offering greater customization while maintaining encapsulation.

What are CSS Parts?

CSS Parts are a feature of the Shadow DOM that allow you to expose certain elements inside a shadow tree to be styled from outside the shadow DOM. By using the part attribute in the shadow DOM and the ::part pseudo-element in your CSS, you can target and style these exposed elements.

For example, if a shadow DOM contains an element with part="title", you can style it from outside the shadow DOM like this:

custom-element::part(title) {
  color: blue;
  font-size: 20px;
}

Default CSS Parts in Custom Element Manifest Viewer

The Custom Element Manifest Viewer exposes several parts for styling:

  • container: The main container of the component.
  • component-preview: The section where the custom element is rendered.
  • knobs: The section containing property and slot controls.
  • code: The section displaying the code sample.
  • title: The titles inside the knob section.
  • label: The label for each knob.
  • input: The input elements for knobs.

Overriding Styles

To customize the styles of the Custom Element Manifest Viewer, you can use the CSS parts exposed by the component. Here is an example demonstrating how to override the default styles:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Element Manifest Viewer Styling Example</title>
  <script type="module">
    import 'custom-element-manifest-viewer';
  </script>
  <style>
    custom-element-manifest-viewer::part(container) {
      display: flex;
      flex-wrap: wrap;
      font-family: Arial, sans-serif;
      border-radius: 12px;
      border: 2px solid #333;
      padding: 16px;
    }

    custom-element-manifest-viewer::part(component-preview) {
      background-color: #f0f0f0;
      padding: 16px;
      border-radius: 8px;
    }

    custom-element-manifest-viewer::part(knobs) {
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: #222;
      color: #fff;
      padding: 16px;
      border-radius: 8px;
    }

    custom-element-manifest-viewer::part(code) {
      background: #1e1e1e;
      color: #dcdcdc;
      padding: 16px;
      border-radius: 8px;
    }

    custom-element-manifest-viewer::part(title) {
      font-size: 1.2em;
      margin-bottom: 8px;
    }

    custom-element-manifest-viewer::part(label) {
      font-weight: bold;
      margin-bottom: 4px;
    }

    custom-element-manifest-viewer::part(input) {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <custom-element-manifest-viewer
    manifest="path/to/manifest.json"
    config="path/to/config.json"
    tag-name="my-custom-element"
    theme="github-dark-default">
  </custom-element-manifest-viewer>
</body>
</html>

In this example, the styles for the different parts of the Custom Element Manifest Viewer are customized using the ::part pseudo-element. You can adjust these styles to fit the design and branding of your application.

Styling Code Block

See this section

Clone this wiki locally