Skip to content

Instantly share code, notes, and snippets.

@nolanlawson

nolanlawson/index.html

Last active October 13, 2022 18:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nolanlawson/97dfd2902dbe91be17c3cf0e21f6a368 to your computer and use it in GitHub Desktop.
Save nolanlawson/97dfd2902dbe91be17c3cf0e21f6a368 to your computer and use it in GitHub Desktop.
Download ZIP
aria-label on a <slot>
Raw
index.html
<!doctype html>
<html>
<head>
<style>
button {
width: 200px;
height: 50px;
}
</style>
<head>
<body>
<h1>With slotted content:</h1>
<label id="label1">
<div id="host1">slotted</div>
</label>
<button type="button" aria-labelledby="label1"> </button>
<h1>With default slotted content:</h1>
<label id="label2">
<div id="host2"></div>
</label>
<button type="button" aria-labelledby="label2"> </button>
<script>
document.querySelector('#host1').attachShadow({ mode: 'open' }).innerHTML = 'foo <slot aria-label="label"></slot> bar'
document.querySelector('#host2').attachShadow({ mode: 'open' }).innerHTML = 'foo <slot aria-label="label">default</slot> bar'
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment