WCC Sandbox

Light DOM (no JS)

      <sb-header></sb-header>
    

Declarative Shadow DOM (has JS)

      <sb-card
        title="iPhone 9"
        thumbnail="https://www.greenwoodjs.dev/assets/greenwood-logo-og.png"
      ></sb-card>
    

HTML Web Component (Light DOM + has JS)

Greenwood Logo

      <sb-picture-frame title="Greenwood Logo">
        <img
          src="https://www.greenwoodjs.dev/assets/greenwood-logo-og.png"
          alt="Greenwood logo"
        />
      </sb-picture-frame>
    

JSX + Light DOM (no JS)

      <sb-header-jsx></sb-header-jsx>
    

JSX + Declarative Shadow DOM (has JS)

      <sb-card-jsx
        title="iPhone X"
        thumbnail="https://d2e6ccujb3mkqf.cloudfront.net/7e8317d3-cc5d-42a8-8350-ba6a02560477-1_d64a25e3-e1f3-4172-b7c9-0c96e82c4d3f.jpg"
      ></sb-card-jsx>
    

JSX + Light DOM + inferredObservability (has JS)

      <sb-counter-jsx
        count="5"
      ></sb-counter-jsx>
    

JSX + DSD + inferredObservability (has JS)

      <sb-counter-dsd-jsx
        count="3"
      ></sb-counter-dsd-jsx>
    

TypeScript

      <sb-greeting-ts
        name="TypeScript"
      ></sb-greeting-ts>
    

TSX

      <sb-counter-tsx
        count="3"
      ></sb-counter-tsx>
    

TSX + DSD + inferredObservability

      <sb-counter-dsd-tsx
        count="3"
      ></sb-counter-dsd-tsx>