Web Components Demo

This is a demo project for miyagi, showcasing how web components can be used.

The web components in this example are originally from https://github.com/mdn/web-components-examples.

Overview

Standard paragraph example text

Morgan Stanley

36 Accountant

My name is Chris, the man said.

slot A placeholder inside a web component that users can fill with their own markup, with the effect of composing different DOM trees together.
name
The name of the slot.
  • UK
    • Yorkshire
      • Leeds
        • Train station
        • Town hall
        • Headrow
      • Bradford
      • Hull
  • USA
    • California
      • Los Angeles
      • San Francisco
      • Berkeley
    • Nevada
    • Oregon
  • Not
  • an
  • expanding
  • list

Host selectors example

This is my first article.

This article is rather lovely and exciting — it is all about animals, including Beavers , Bears , and Wolves . I love animals and I'm sure you will too; please let us know what your favorite animals are. Woo hoo!

This is my second article.

This article is also quite exciting — it is all about colors, including Red , Blue , and Pink . A true joy indeed — funky exciting colors make the world go round. No more gray days for us.

Let's have some different text!
  • Let's have some different text!
  • In a list!
  • Apples
  • Pears
  • Bananas
  • Oranges
  • Peaches
  • Strawberries
  • Blueberries

A common, sweet, crunchy fruit, usually green or yellow in color.

A fairly common, sweet, usually green fruit, usually softer than Apples.

A long, curved, yellow fruit, with a fairly gentle flavor.

Orange in color, usually sweet but can be sharp, often contains pips.

An orange fruit with big stone in the middle, and sweet, juicy flesh.

A red fruit with yellow seeds on the outside; has a sweet flavor and a pretty shape.

They are berries and they are blue; sweet in flavor, small in size, round.

Morgan Stanley

36 Accountant

Sample heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar sed justo sed viverra. Aliquam ac scelerisque tellus. Vivamus porttitor nunc vel nibh rutrum hendrerit. Donec viverra vestibulum pretium. Mauris at eros vitae ante pellentesque bibendum. Etiam et blandit purus, nec aliquam libero. Etiam leo felis, pulvinar et diam id, sagittis pulvinar diam. Nunc pellentesque rutrum sapien, sed faucibus urna sodales in. Sed tortor nisl, egestas nec egestas luctus, faucibus vitae purus. Ut elit nunc, pretium eget fermentum id, accumsan et velit. Sed mattis velit diam, a elementum nunc facilisis sit amet.

Pellentesque ornare tellus sit amet massa tincidunt congue. Morbi cursus, tellus vitae pulvinar dictum, dui turpis faucibus ipsum, nec hendrerit augue nisi et enim. Curabitur felis metus, euismod et augue et, luctus dignissim metus. Mauris placerat tellus id efficitur ornare. Cras enim urna, vestibulum vel molestie vitae, mollis vitae eros. Sed lacinia scelerisque diam, a varius urna iaculis ut. Nam lacinia, velit consequat venenatis pellentesque, leo tortor porttitor est, sit amet accumsan ex lectus eget ipsum. Quisque luctus, ex ac fringilla tincidunt, risus mauris sagittis mauris, at iaculis mauris purus eget neque. Donec viverra in ex sed ullamcorper. In ac nisi vel enim accumsan feugiat et sed augue. Donec nisl metus, sollicitudin eu tempus a, scelerisque sed diam.