Experimenting with declarative shadow dom

components/block-buy-buttons/assets/block-buy-buttons.css

@@ -0,0 +1,44 @@
+:host {
+  display: block;
+}
+
+.shopify-payment-button {
+  margin-top: var(--size-3);
+
+  @media only screen and (min-width: 769px) {
+    margin-top: var(--size-5);
+  }
+}
+
+.shopify-payment-button__button {
+  width: 100%;
+  font: inherit;
+  border-radius: var(--radius-xs);
+  overflow: hidden;
+  min-height: var(--size-14);
+  border-radius: var(--radius-xs);
+  background: #141811;
+  color: white;
+  font-size: var(--size-4);
+
+  &:hover {
+    background-color: #000;
+  }
+}
+
+.block-buy-buttons__submit {
+  background-color: transparent;
+  border-radius: var(--radius-xs);
+  border: 1px solid #141811;
+  color: #141811;
+
+  &.button {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+.block-buy-buttons__submit[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

components/block-buy-buttons/block-buy-buttons.liquid

@@ -36,46 +36,50 @@
 -%}
 
 <block-buy-buttons
-  class="block-buy-buttons"
   data-section-id="{{ section.id }}"
   {% if show_dynamic_checkout %}
     data-show-dynamic-checkout=""
   {% endif %}
   {{ block.shopify_attributes }}
 >
-  <div role="alert" hidden>
-    <span></span>
-  </div>
+  <template shadowrootmode="open">
+    {% render 'styles-component', styles: 'button' %}
+    {{ 'block-buy-buttons.css' | asset_url | stylesheet_tag }}
 
-  {%- form 'product', product, id: form_id, novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
-    <input
-      type="hidden"
-      name="id"
-      value="{{ product.selected_or_first_available_variant.id }}"
-      {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
-        disabled
-      {% endif %}
-    >
-    <div>
-      <button
-        id="ProductSubmitButton-{{ section.id }}"
-        type="submit"
-        name="add"
-        class="button block-buy-buttons__submit"
+    <div role="alert" hidden>
+      <span></span>
+    </div>
+
+    {%- form 'product', product, id: form_id, novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
+      <input
+        type="hidden"
+        name="id"
+        value="{{ product.selected_or_first_available_variant.id }}"
         {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
           disabled
         {% endif %}
       >
-        <span>
-          {{- button_text -}}
-        </span>
-      </button>
+      <div>
+        <button
+          id="ProductSubmitButton-{{ section.id }}"
+          type="submit"
+          name="add"
+          class="button block-buy-buttons__submit"
+          {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
+            disabled
+          {% endif %}
+        >
+          <span>
+            {{- button_text -}}
+          </span>
+        </button>
 
-      {%- if show_dynamic_checkout -%}
-        {{- form | payment_button -}}
-      {%- endif -%}
-    </div>
-  {%- endform -%}
+        {%- if show_dynamic_checkout -%}
+          {{- form | payment_button -}}
+        {%- endif -%}
+      </div>
+    {%- endform -%}
+  </template>
 
   <script type="application/json">
     {

components/block-cart-checkout-button/main.css → components/block-cart-checkout-button/assets/block-cart-checkout-button.css

@@ -1,21 +1,21 @@
-.cart-checkout-button {
+:host {
   display: flex;
   flex-direction: column;
   text-align: center;
   justify-items: center;
   gap: var(--size-4);
 }
 
-.cart-checkout-button__shipping-copy {
+.shipping-copy {
   font-size: 0.75rem;
 }
 
-.cart-checkout-button button {
+.button {
   width: 100%;
   justify-content: center;
 }
 
-.cart-checkout-button__payment-types {
+.payment-types {
   display: flex;
   gap: var(--size-1);
   justify-content: center;

components/block-cart-checkout-button/block-cart-checkout-button.liquid

@@ -13,24 +13,29 @@
   assign taxes_included = taxes_included | default: cart.taxes_included, allow_false: true
 %}
 
-<div class="cart-checkout-button" {{ block.shopify_attributes }}>
-  <div class="cart-checkout-button__shipping-copy">
-    {%- if taxes_included -%}
-      {{ 'info.shipping_at_checkout_taxes_included' | t }}
-    {%- else -%}
-      {{ 'info.shipping_at_checkout' | t }}
-    {%- endif -%}
-  </div>
-
-  <button type="submit" name="checkout" class="button">
-    {{ 'actions.checkout' | t }}
-  </button>
+<block-cart-checkout-button {{ block.shopify_attributes }}>
+  <template shadowrootmode="open">
+    {% render 'styles-component' %}
+    {{ 'block-cart-checkout-button' | asset_url | stylesheet_tag }}
 
-  {%- if shop.enabled_currencies.size > 0 -%}
-    <div class="cart-checkout-button__payment-types">
-      {%- for type in shop.enabled_payment_types -%}
-        {{- type | payment_type_svg_tag -}}
-      {%- endfor -%}
+    <div class="shipping-copy">
+      {%- if taxes_included -%}
+        {{ 'info.shipping_at_checkout_taxes_included' | t }}
+      {%- else -%}
+        {{ 'info.shipping_at_checkout' | t }}
+      {%- endif -%}
     </div>
-  {%- endif -%}
-</div>
+
+    <button type="submit" name="checkout" class="button">
+      {{ 'actions.checkout' | t }}
+    </button>
+
+    {%- if shop.enabled_currencies.size > 0 -%}
+      <div class="payment-types">
+        {%- for type in shop.enabled_payment_types -%}
+          {{- type | payment_type_svg_tag -}}
+        {%- endfor -%}
+      </div>
+    {%- endif -%}
+  </template>
+</block-cart-checkout-button>

components/block-cart-note/main.css → components/block-cart-note/assets/block-cart-note.css

@@ -1,4 +1,4 @@
-cart-note {
+:host {
   display: block;
 }
 

components/block-cart-note/block-cart-note.liquid

@@ -15,15 +15,19 @@
 %}
 
 <is-land {{ hydration }}>
-  <cart-note {{ block.shopify_attributes }}>
-    <textarea
-      name="note"
-      class="cart-note"
-      placeholder="{{ 'actions.add_order_note' | t }}"
-      rows="5"
-    >{{- note -}}</textarea>
-  </cart-note>
+  <block-cart-note {{ block.shopify_attributes }}>
+    <template shadowrootmode="open">
+      {% render 'styles-component' %}
+      {{ 'block-cart-note.css' | asset_url | stylesheet_tag }}
 
+      <textarea
+        name="note"
+        class="cart-note"
+        placeholder="{{ 'actions.add_order_note' | t }}"
+        rows="5"
+      >{{- note -}}</textarea>
+    </template>
+  </block-cart-note>
   <template data-island>
     <script type="module">
       import 'components/block-cart-note'

components/block-cart-totals/main.css → components/block-cart-totals/assets/block-cart-totals.css

@@ -1,4 +1,4 @@
-.cart-totals {
+:host {
   display: flex;
   justify-content: space-between;
   font-size: 1.125rem;

components/block-cart-totals/block-cart-totals.liquid

@@ -9,18 +9,21 @@
   assign hydration = hydration | default: 'on:visible'
 %}
 
-<div class="cart-totals" {{ block.shopify_attributes }}>
-  <span>{{ 'labels.total' | t }}</span>
+<is-land {{ hydration }}>
+  <block-cart-totals {{ block.shopify_attributes }}>
+    <template shadowrootmode="open">
+      {% render 'styles-component' %}
+      {{ 'block-cart-totals.css' | asset_url | stylesheet_tag }}
 
-  <is-land {{ hydration }}>
-    <cart-total-price class="cart-totals__price">
-      {{- cart.total_price | money -}}
-    </cart-total-price>
-
-    <template data-island>
-      <script type="module">
-        import 'components/block-cart-totals'
-      </script>
+      <span>{{ 'labels.total' | t }}</span>
+      <cart-total-price>
+        {{- cart.total_price | money -}}
+      </cart-total-price>
     </template>
-  </is-land>
-</div>
+  </block-cart-totals>
+  <template data-island>
+    <script type="module">
+      import 'components/block-cart-totals'
+    </script>
+  </template>
+</is-land>

components/block-image/main.css → components/block-image/assets/block-image.css

@@ -1,15 +1,11 @@
-.block-image {
-  position: relative;
-  height: 100%;
-}
-
-.block-image {
+:host {
   display: block;
+  position: relative;
   width: 100%;
   height: 100%;
 }
 
-.block-image > * {
+:host > svg {
   display: block;
   width: 100%;
   height: 100%;

components/block-image/block-image.liquid

@@ -23,12 +23,17 @@
   endif
 %}
 
-<div class="block-image aspect-ratio--{{ media_crop }}" {{ block.shopify_attributes }}>
-  {%- liquid
-    if image != blank
-      echo image | image_url: width: 800 | image_tag: loading: loading, fetchpriority: fetchpriority, sizes: sizes
-    else
-      echo 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg'
-    endif
-  -%}
-</div>
+<block-image class="aspect-ratio--{{ media_crop }}" {{ block.shopify_attributes }}>
+  <template shadowrootmode="open">
+    {% render 'styles-component' %}
+    {{ 'block-image.css' | asset_url | stylesheet_tag }}
+
+    {%- liquid
+      if image != blank
+        echo image | image_url: width: 800 | image_tag: loading: loading, fetchpriority: fetchpriority, sizes: sizes
+      else
+        echo 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg'
+      endif
+    -%}
+  </template>
+</block-image>

styles/modules/model-viewer.css → components/block-model/assets/block-model.css

@@ -1,3 +1,10 @@
+model-viewer,
+model-media {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 .shopify-model-viewer-ui,
 .shopify-model-viewer-ui model-viewer {
   display: block;