A state class is a CSS class whose presence represents a component’s current condition. Conventionally prefixed with is- or has-, it provides a clear hook for JavaScript-driven appearance changes while keeping behavior with the component’s styles. section 9.2.1
Opening a dropdown
A dropdown starts closed with .dropdown__drawer { display: none; }. JavaScript toggles is-open on the parent; matching selectors then display the drawer and reverse the toggle arrow. section 9.2.1
Listing 9.11 Constructing a dropdown menu from two modules
<div class="dropdown">
<button class="dropdown__toggle">Main Menu</button> #1
<div class="dropdown__drawer"> #2
<ul class="menu"> #3
<li><a href="/">Home</a></li>
<li><a href="/coffees">Coffees</a></li>
<li><a href="/brewers">Brewers</a></li>
<li><a href="/specials">Specials</a></li>
<li><a href="/about">About us</a></li>
</ul>
</div>
</div>
<script type="module">
var toggle = document.querySelector('.dropdown__toggle');
toggle.addEventListener('click', function (event) { #4
event.preventDefault();
var dropdown = event.target.parentNode;
dropdown.classList.toggle('is-open');
}
);
</script>
See the markup and click handler that toggle the is-open state on the dropdown module. section 9.2.1
