我阅读了a sample page和the document的源代码，并编写了以下代码：
<html>
<head>
<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>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="drawer-frame-root">
<aside class="mdc-drawer mdc-drawer--modal" id="drawer">
<div class="mdc-drawer__header">
<h3 class="mdc-drawer__title">title</h3>
<h6 class="mdc-drawer__subtitle">subtitle</h6>
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list" data-mdc-auto-init="MDCList">
<a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
<span class="mdc-list-item__text">Inbox</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
<span class="mdc-list-item__text">Outgoing</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
<span class="mdc-list-item__text">Drafts</span>
</a>
</nav>
</div>
</aside>
<div class="mdc-drawer-scrim"></div>
<div class="drawer-frame-app-content">
<header class="mdc-top-app-bar drawer-top-app-bar" data-mdc-auto-init="MDCTopAppBar" id="app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button href="#" class="material-icons mdc-top-app-bar__navigation-icon mdc-ripple-upgraded--unbounded mdc-ripple-upgraded" data-mdc-auto-init="MDCRipple">menu</button>
<span class="mdc-top-app-bar__title">Title</span>
</section>
</div>
</header>
<div class="drawer-main-content" id="main-content">
<div class="mdc-top-app-bar--fixed-adjust"></div>
</div>
</div>
</div>
<!-- at the bottom of the page -->
<script type="text/javascript">
window.mdc.autoInit();
const list = document.querySelector('.mdc-list').MDCList;
list.wrapFocus = true;
const drawer = document.getElementById('drawer');
const topAppBar = document.querySelector('.mdc-top-app-bar').MDCTopAppBar;
topAppBar.setScrollTarget(document.getElementById('main-content'));
topAppBar.listen('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open;
console.log(drawer.open);
});
</script>
</body>
</html>
如果单击导航按钮，将执行console.log(drawer.open)，您将看到输出，true，false，true，false，true，...
但是，抽屉不会出现。
如何切换模态抽屉？
更改
const drawer = document.getElementById('drawer');
至
const drawer = new mdc.drawer.MDCDrawer(document.getElementById('drawer'));