Shadow DOM Component
To create a custom component like the one you shared using a Web Component with a Shadow Root, you can follow this approach. This example demonstrates how to build a basic sticky-buy-button web component with encapsulated styles and structure.
Steps to Create a Custom Sticky Buy Button:
- Define the Custom Element using JavaScript.
- Attach a Shadow DOM for encapsulation.
- Insert HTML Content and CSS for the component.
Example Implementation:
<sticky-buy-button></sticky-buy-button>
<script>
// Define the StickyBuyButton custom element
class StickyBuyButton extends HTMLElement {
constructor() {
super();
// Attach Shadow DOM
const shadow = this.attachShadow({ mode: 'open' });
// Create the content for the sticky button
const wrapper = document.createElement('div');
wrapper.setAttribute('class', 'sticky-buy-button fixed z-20 bottom-0 right-0 opacity-1 visible');
// Adding inner HTML (you can adjust as needed)
wrapper.innerHTML = `
<div class="product-form grid gap-4">
<div class="sticky-buy-button__variant grid items-center gap-4">
<sticky-variant-media class="hidden md:block media media--adapt relative overflow-hidden">
<img src="//drpen.net/cdn/shop/files/A6S_001_0350e3e8-2063-4a5e-8419-8a6a3d281171.jpg?v=1727271187&width=1043" alt="Dr. Pen A6S Microneedling Pen" width="1043" height="1000" />
</sticky-variant-media>
<div class="grid gap-2">
<div class="grid gap-1">
<p class="text-base font-medium leading-tight">Dr. Pen A6S Microneedling Pen</p>
</div>
<div id="StickyPrice">
<div class="price price--on-sale flex items-center gap-2">
<span class="price__regular">$119.00</span>
<span class="price__sale">$215.00</span>
</div>
</div>
</div>
<button type="submit" class="button button--primary">
<span>Add to cart</span>
</button>
</div>
</div>
`;
// Styling (Encapsulated in the shadow DOM)
const style = document.createElement('style');
style.textContent = `
.sticky-buy-button {
position: fixed;
bottom: 0;
right: 0;
opacity: 1;
visibility: visible;
transform: translateY(0px);
background-color: white;
padding: 10px;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
.button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
}
.price__regular {
text-decoration: line-through;
color: gray;
}
.price__sale {
color: red;
}
`;
// Attach the content and style to the shadow root
shadow.appendChild(style);
shadow.appendChild(wrapper);
}
}
// Register the custom element
customElements.define('sticky-buy-button', StickyBuyButton);
</script>Breakdown:
class StickyBuyButton extends HTMLElement: Defines the custom element for thesticky-buy-button.- Shadow DOM: By using
this.attachShadow({ mode: 'open' }), we encapsulate the styles and HTML structure within the custom component. - HTML Content: The inner HTML mimics the structure you shared, including the product image, title, price, and “Add to cart” button.
- CSS: Styles are scoped to the shadow DOM, preventing conflicts with global styles. You can customize the button appearance, price display, and any other design elements.
Customization:
You can expand this component to include functionality such as:
- Dynamically updating product information.
- Animating the appearance/disappearance of the button (e.g., when scrolling).
- Handling form submissions or integrating with a shopping cart system.