Material.io with CDN

So I am trying to figure out how to use Material.io for the front end for some web app experimentation I am doing, but I just want to utilize the CDN for this and NOT npm. I am somewhat following along with the example found here: https://codelabs.developers.google.com/codelabs/mdc-101-web/#1 but it assumes npm use. Right now I have the Material components for CSS and JS imported, and I have a basic login form, with some styling, but I can't figure out how to get the JavaScript to run properly and result in the form box animation as can be seen in the example here: https://codelabs.developers.google.com/codelabs/mdc-101-web/#2.

HTML:

<html>
    <head>
        <!-- Import Material components CSS and JS -->
        <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
        <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    </head>
<body>
        <div class="login_container">
            <div class="box" id="two"> 
                <form>
                    <label class="mdc-text-field mdc-text-field--filled username">
                        <span class="mdc-text-field__ripple"></span>
                        <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
                        <span class="mdc-floating-label" id="username-label">Username</span>
                        <span class="mdc-line-ripple"></span>
                    </label>
                    <label class="mdc-text-field mdc-text-field--filled password">
                        <span class="mdc-text-field__ripple"></span>
                        <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
                        <span class="mdc-floating-label" id="password-label">Password</span>
                        <span class="mdc-line-ripple"></span>
                    </label>
                </form>
            </div>
        </div>
    </body>
</html>

CSS:

.username,
.password {
  display: flex;
  margin: 20px auto;
  width: 300px;
}

JavaScript:

import {MDCTextField} from '@material/textfield';

const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));

I realize this likely won't work because it assumes the npm setup, but I have also tried this and it does not work:

mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));

Any help is appreciated, even if it is just pointing me to a new document or something. I couldn't seem to find the right answers in the Material documentation as it assumes or recommends npm usage.