Reference
Elements
Every custom element Sledge registers on the storefront — 59 in total, grouped by module.
This list always matches the version of Sledge running on your store.
Sledge registers 59 custom elements. Each renders into its own shadow root, so theme CSS cannot reach inside and Sledge styles cannot leak out.
Element tag names are a supported API. The class names inside a shadow root are not — see Custom code for the stability policy.
| Element | Observed attributes |
|---|
<sledge-bundle-card> | — |
<sledge-bundle-popup> | — |
<sledge-bundle-widget> | — |
| Element | Observed attributes |
|---|
<sledge-cart-bundle-group> | — |
<sledge-cart-countdown> | — |
<sledge-cart-drawer> | — |
<sledge-cart-item> | — |
<sledge-cart-reward-bar> | — |
| Element | Observed attributes |
|---|
<sledge-drawer> | drawer-title, position |
<sledge-popup> | popup-title, max-width |
<sledge-product-card> | variant |
<sledge-virtualized-list> | — |
| Element | Observed attributes |
|---|
<sledge-filter-active> | — |
<sledge-filter-group> | — |
<sledge-filter-item> | — |
<sledge-filter-panel> | — |
<sledge-filter-radio> | — |
<sledge-filter-range> | — |
<sledge-filter-select> | — |
<sledge-filter-sort> | — |
<sledge-filter-tree-item> | — |
<sledge-pagination> | — |
<sledge-product-grid> | — |
| Element | Observed attributes |
|---|
<sledge-merch-back-in-stock> | product-id, variant-id, mode |
<sledge-merch-back-in-stock-card> | — |
<sledge-merch-badge> | — |
<sledge-merch-preorder> | product-id, variant-id |
<sledge-merch-preorder-bundle> | — |
<sledge-merch-preorder-card> | — |
<sledge-merch-tabs> | — |
<sledge-price-display> | original-price, final-price, discount-label, compact, single |
| Element | Observed attributes |
|---|
<sledge-promotion-banner> | — |
<sledge-promotion-countdown> | — |
| Element | Observed attributes |
|---|
<sledge-quick-add-modal> | open |
| Element | Observed attributes |
|---|
<sledge-recommendation-slider> | — |
| Element | Observed attributes |
|---|
<sledge-review-detail> | — |
<sledge-review-form> | — |
<sledge-review-happy-customers> | — |
<sledge-review-rating> | product-id, value, count, size, show-count |
<sledge-review-snippet> | product-id, data-width-element |
<sledge-review-sticky-sidebar> | — |
<sledge-review-trust-badge> | — |
<sledge-review-widget> | product-id |
| Element | Observed attributes |
|---|
<sledge-search-bar> | — |
<sledge-search-input> | — |
<sledge-search-modal> | — |
<sledge-search-product-row> | — |
<sledge-search-result-panel> | — |
<sledge-search-section> | — |
<sledge-search-tags> | — |
<sledge-search-trigger> | — |
<sledge-search-value> | — |
| Element | Observed attributes |
|---|
<sledge-star-rating> | value, max, size, fill-color, outline-color, interactive |
<sledge-toast> | — |
| Element | Observed attributes |
|---|
<sledge-wishlist-badge> | floating, url |
<sledge-wishlist-button> | product-id, product-variant-id |
<sledge-wishlist-flyout> | — |
<sledge-wishlist-trigger> | product-id, product-variant-id |
<sledge-wishlist-widget> | share-id |
