Styling

Each component draws itself inside a shadow root, so your site’s CSS can’t accidentally break it (and its CSS can’t leak into your page). You style it in two ways: custom properties for colors, corners and the font, and ::part() for anything more.

Custom properties

Set these on :root to style every component on the page, or on one element (or a wrapper) to style just that one.

Property	Default	Used for
--dpd-primary	#2563eb	Buttons, the cart badge, links
--dpd-primary-text	#ffffff	Text on buttons
--dpd-surface	#ffffff	Cards, the drawer and dialogs
--dpd-text	#1f2933	Text
--dpd-muted	#6b7280	Secondary text, like a price point’s name
--dpd-border	#e5e7eb	Borders and dividers
--dpd-danger	#dc2626	Errors and low stock
--dpd-success	#15803d	Discounts in the totals
--dpd-radius	8px	Corners
--dpd-font	Your page’s font	Every component’s text

<div class="green-shop">
<dpd-product product="45181"></dpd-product>
<dpd-cart-button label="Cart"></dpd-cart-button>
</div>

<style>
.green-shop {
--dpd-primary: #2f6f4e;
--dpd-radius: 0;
--dpd-font: Georgia, serif;
}
</style>

The drawer and dialogs live in a <dpd-cart-overlay> that dpd.js adds to the end of <body>, so they only pick up properties you set on :root or body, or on dpd-cart-overlay itself.

::part()

For anything the properties don’t cover, ::part() reaches named pieces inside a component. You can use any CSS on a part, but not on what’s inside it.

Element	Parts
<dpd-product>	card, image, name, name-link, price, description, button
<dpd-add-to-cart>	button
<dpd-cart>	cart, item, totals, checkout-button
<dpd-cart-button>	button, badge
<dpd-checkout-button>	button
<dpd-cart-overlay>	backdrop, drawer, dialog

<dpd-add-to-cart class="loud" product="163005"></dpd-add-to-cart>

<style>
dpd-add-to-cart.loud::part(button) {
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 1em 2em;
}
</style>

A few more ideas:

/* square product cards with a shadow */
dpd-product::part(card) {
  border-radius: 0;
  box-shadow: 0 10px 24px -18px rgb(0 0 0 / 50%);
}

/* a bigger name on product pages */
dpd-product[layout="detail"]::part(name) {
  font-size: 2.5rem;
}

/* an accent stripe down the drawer */
dpd-cart-overlay::part(drawer) {
  border-left: 4px solid tomato;
}

castandcrumb.com is a demo shop styled this way from top to bottom.