Embedding and theming

How Organization Depot's scripts go into your pages, and how to make what they draw look like your site.

Loading a script

Every script comes from https://developers.organizationdepot.com, in a folder per product and version:

The Storefront's files are storefront.js, storefront.mjs and components.js; see Storefront.

• Web components load as a module: <script type="module" src="…/components.js"></script>. Without type="module", nothing happens.
• A classic script, such as storefront.js, loads with a plain <script src>, before the code that uses it.
• Serve your page over HTTP, even on your own machine. Browsers don't run module scripts from file://.
• Pin a version when you need to know exactly which code runs; see Security.

Web components

Organization Depot's web components are custom elements whose names start with od-, such as <od-product>. They all work the same way:

• Attributes configure them, and an element updates when you change one.
• They render in an open shadow root, so your page's styles don't reach inside by accident, and theirs don't leak out.
• Their events bubble and cross shadow roots, so you can listen on document. Event names start with od:, such as od:added.
• Text is text. Values from Organization Depot are rendered as text, never as HTML.
• A strict Content-Security-Policy works. Their styles are constructable stylesheets, with no inline style attributes and no eval; see Security.
• Loading a script twice is harmless: the first copy's elements win.
• They need a browser from 2023 on: Chrome and Edge 111, Firefox 113, Safari 16.4.

Theming

The elements start from the branding you set in Organization Depot, and you adjust them in four layers, from the broadest to the most specific:

1. Branding. Colours, fonts, corner radius and density come from Organization Depot. The Storefront's elements take your shop's branding, which <od-store> applies to the page.
2. CSS custom properties. Properties named --od-… override the branding, on :root for the whole page or on one element. Any rule of yours wins.
3. Parts. Every meaningful piece has a part name, so ::part() can style it.
4. Slots. Labels can be replaced with your own markup, by slot name.

<style>
  :root {
    --od-color-brand: #7c4a1e;
    --od-radius-base: 4px;
  }
  od-product::part(add-button) {
    text-transform: uppercase;
  }
</style>

<od-product handle="walnut-end-grain-board">
  <span slot="add-label">Add to basket</span>
</od-product>

Each product's reference lists its properties, parts and slots. For the Storefront, see Styling.