How to use: <olympic-medal-ranking>

by WebComponents

HTML

<script src="https://olympic-medal-ranking.github.io/element.min.js"></script>

<!-- use total="all" to display all medal wining countries -->
<olympic-medal-ranking total="10"></olympic-medal-ranking>

<style id="PARTS">
  /* global CSS styles pre-defined "parts" inside shadowDOM */
  olympic-medal-ranking {
    &::part(table) {
      max-width: 550px;
    }
    &::part(header) {
      font-size: 150%;
      color: goldenrod;
      background: lightgrey;
      text-shadow: 1px 1px 1px black;
    }
    &::part(medal) {
      font-weight: bold;
    }
    &::part(rank),
    &::part(countrycode),
    &::part(medaltotal) {
      font-weight: normal;
      color: grey;
    }
  }
</style>