material component for the web javascriptのimport方法

html
1<!DOCTYPE html>
2<html class="mdc-typography">
3  <head>
4    <meta charset="utf-8">
5    <title>Text Field</title>
6    <link
7      rel="stylesheet"
8      href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
9
10
11</head>
12  <body>
13    <main>
14      <h1 class="mdc-typography--display1">Text Field</h1>
15      <div class="mdc-text-field">
16  <input type="text" id="my-text-field" class="mdc-text-field__input">
17  <label class="mdc-floating-label" for="my-text-field">Hint text</label>
18  <div class="mdc-line-ripple"></div>
19</div>
20
21<!--Full width-->
22<div class="mdc-text-field mdc-text-field--fullwidth">
23  <input class="mdc-text-field__input"
24         type="text"
25         placeholder="Full-Width Text Field"
26         aria-label="Full-Width Text Field">
27</div>
28
29<!--Outlined-->
30<div class="mdc-text-field mdc-text-field--outlined">
31  <input type="text" id="tf-outlined" class="mdc-text-field__input">
32  <label for="tf-outlined" class="mdc-floating-label">Your Name</label>
33  <div class="mdc-notched-outline">
34    <svg>
35      <path class="mdc-notched-outline__path"/>
36    </svg>
37  </div>
38  <div class="mdc-notched-outline__idle"></div>
39</div>
40
41    <script  type="text/javascript">      
42    	import {MDCTextField} from '@material/textfield';
43		const textField = new MDCTextField(document.querySelector('.mdc-text-field'));</script>
44    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
45    <script>window.mdc.autoInit();</script>
46
47    
48  </body>
49</html>
50