Vanilla Javascript Material Components Web have missing Css attributes

I am testing Material Components Web from their recommended CDN & some minimal simple custom Vanilla Javascript to get it work properly.

For example, I can follow the single line list example showed here like this:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    <ul class="mdc-list">
      <li class="mdc-list-item" tabindex="0">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
    </ul>
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>
      mdc.list.MDCList.attachTo(document.querySelector('.mdc-list'));
    </script>
  </body>
</html>

Everything works fine except for the Css styling. No height: 48px is set to any of the list items, so all of them appear horribly collapsed, with no paddings at all.

Using the the Chrome Developer Inspector in the online example on their website, I see that height should be 48px height for every single list item.

Why are there missing styles in the official CDN Css?

NOTE: Things I am NOT asking for

I am not using any Js framework: Vue, Angular, React, Web dev server... just plain vanilla Js.
I am not asking how to add custom Css to add that specific missing value (I know how to do it, I just want to avoid doing it, since it should come already with the library). I just showed a single simple example of some missing attribute. I wonder if I am missing some other import or something.
I am already using the deprecated version of lists in production, that work fine, but I am trying here to update to the new recommended way of defining lists.

Solution

First of all, I'd recommend using docs on github repo - https://github.com/material-components/material-components-web/tree/master/packages/mdc-list:

List is currently being updated to better match the Material spec. As a result, there are two versions of List available: the deprecated old version and the new, future-proof version.

... there are differences in class names and DOM structure: the old version uses class names with a mdc-deprecated-list prefix (e.g., mdc-deprecated-list-item) whereas the new version uses the typical mdc-list prefix (e.g., mdc-list-item).

The example you referenced is related to deprecated version. You either need to add deprecated to class names, or update it according to the new docs.

Here is updated code which uses the new List version:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    <ul class="mdc-list">
      <li class="mdc-list-item mdc-list-item--non-interactive mdc-list-item--with-one-line" tabindex="0">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__content">Single-line item</span>
      </li>
      <li class="mdc-list-item mdc-list-item--non-interactive mdc-list-item--with-one-line">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__content">Single-line item</span>
      </li>
      <li class="mdc-list-item mdc-list-item--non-interactive mdc-list-item--with-one-line">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__content">Single-line item</span>
      </li>
    </ul>
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>
      mdc.list.MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));
    </script>
  </body>
</html>