After performance analysis, added some quotes in features section in …

README.md

@@ -9,8 +9,11 @@ Shop is a sample e-commerce [Progressive Web App](https://developers.google.com/
 - a sample e-commerce shopping site
 - pattern for a real-life shopping cart and store checkout flow
 - pattern for using custom announcers for accessibility
+- Search Engine Optimized
+- 100% Accessibility
 
 ## Setup
+
 ```bash
 $ git clone https://github.com/Polymer/shop.git
 $ cd shop
@@ -19,16 +22,21 @@ $ npm start
 ```
 
 ## Build
+
 ```bash
 $ npm run build
 ```
 
 ## Test the build
+
 To test prpl-server build:
+
 ```bash
 $ npm run serve:prpl-server
 ```
+
 To test static build:
+
 ```bash
 $ npm run serve:static
 ```

src/shop-cart.js

@@ -1,103 +1,107 @@
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import './shop-button.js';
-import './shop-common-styles.js';
-import './shop-form-styles.js';
+import { PolymerElement, html } from "@polymer/polymer/polymer-element.js";
+import "./shop-button.js";
+import "./shop-common-styles.js";
+import "./shop-form-styles.js";
 
 class ShopCart extends PolymerElement {
   static get template() {
     return html`
-    <style include="shop-common-styles shop-button shop-form-styles">
-
-      .list {
-        margin: 40px 0;
-      }
-
-      .checkout-box {
-        font-weight: bold;
-        text-align: right;
-        margin-right: 10px;
-      }
-
-      .subtotal {
-        margin: 0 64px 0 24px;
-      }
+      <style include="shop-common-styles shop-button shop-form-styles">
+        .list {
+          margin: 40px 0;
+        }
 
-      @media (max-width: 767px) {
+        .checkout-box {
+          font-weight: bold;
+          text-align: right;
+          margin-right: 10px;
+        }
 
         .subtotal {
-          margin: 0 0 0 24px;
+          margin: 0 64px 0 24px;
         }
 
-      }
-
-    </style>
+        @media (max-width: 767px) {
+          .subtotal {
+            margin: 0 0 0 24px;
+          }
+        }
+      </style>
 
-    <div class="main-frame">
-      <div class="subsection" visible$="[[!_hasItems]]">
-        <p class="empty-cart">Your <iron-icon icon="shopping-cart"></iron-icon> is empty.</p>
-      </div>
-      <div class="subsection" visible$="[[_hasItems]]">
-        <header>
-          <h1>Your Cart</h1>
-          <span>([[_getPluralizedQuantity(cart.length)]])</span>
-        </header>
-        <div class="list">
-          <dom-repeat items="[[cart]]" as="entry">
-            <template>
-              <shop-cart-item entry="[[entry]]"></shop-cart-item>
-            </template>
-          </dom-repeat>
+      <div class="main-frame">
+        <div class="subsection" visible$="[[!_hasItems]]">
+          <p class="empty-cart">
+            Your <iron-icon icon="shopping-cart"></iron-icon> is empty.
+          </p>
         </div>
-        <div class="checkout-box">
-          Total: <span class="subtotal">[[_formatTotal(total)]]</span>
-          <shop-button responsive>
-            <a href="/checkout">Checkout</a>
-          </shop-button>
+        <div class="subsection" visible$="[[_hasItems]]">
+          <header>
+            <h1>Your Cart</h1>
+            <span>([[_getPluralizedQuantity(cart.length)]])</span>
+          </header>
+          <div class="list">
+            <dom-repeat items="[[cart]]" as="entry">
+              <template>
+                <shop-cart-item entry="[[entry]]"></shop-cart-item>
+              </template>
+            </dom-repeat>
+          </div>
+          <div class="checkout-box">
+            Total: <span class="subtotal">[[_formatTotal(total)]]</span>
+            <shop-button responsive>
+              <a href="/checkout">Checkout</a>
+            </shop-button>
+          </div>
         </div>
       </div>
-    </div>
     `;
   }
-  static get is() { return 'shop-cart'; }
-
-  static get properties() { return {
+  static get is() {
+    return "shop-cart";
+  }
 
-    total: Number,
+  static get properties() {
+    return {
+      total: Number,
 
-    cart: Array,
+      cart: Array,
 
-    visible: {
-      type: Boolean,
-      observer: '_visibleChanged'
-    },
+      visible: {
+        type: Boolean,
+        observer: "_visibleChanged",
+      },
 
-    _hasItems: {
-      type: Boolean,
-      computed: '_computeHasItem(cart.length)'
-    }
-
-  }}
+      _hasItems: {
+        type: Boolean,
+        computed: "_computeHasItem(cart.length)",
+      },
+    };
+  }
 
   _formatTotal(total) {
-    return isNaN(total) ? '' : '$' + total.toFixed(2);
+    return isNaN(total) ? "" : "$" + total.toFixed(2);
   }
 
   _computeHasItem(cartLength) {
     return cartLength > 0;
   }
 
   _getPluralizedQuantity(quantity) {
-    return quantity + ' ' + (quantity === 1 ? 'item' : 'items');
+    return quantity + " " + (quantity === 1 ? "item" : "items");
   }
 
   _visibleChanged(visible) {
     if (visible) {
       // Notify the section's title
-      this.dispatchEvent(new CustomEvent('change-section', {
-        bubbles: true, composed: true, detail: { title: 'Your cart' }}));
+      this.dispatchEvent(
+        new CustomEvent("change-section", {
+          bubbles: true,
+          composed: true,
+          detail: { title: "Your cart" },
+        })
+      );
     }
   }
-
 }
 
 customElements.define(ShopCart.is, ShopCart);