Skip to content

Instantly share code, notes, and snippets.

@nolanlawson
Created March 28, 2022 23:42
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/fa70820b6e9d9146536dcf3ec95b0134 to your computer and use it in GitHub Desktop.
Save nolanlawson/fa70820b6e9d9146536dcf3ec95b0134 to your computer and use it in GitHub Desktop.
getAccessibleName shadow DOM demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getAccessibleName shadow DOM demo</title>
</head>
<body>
<h1>getAccessibleName shadow DOM demo</h1>
<button><x-component></x-component></button>
<script type="module">
customElements.define('x-component', class extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' }).innerHTML = `<div>hello world</div>`
}
})
</script>
<script type="module">
import { getAccessibleName } from 'https://cdn.skypack.dev/accname@v1.1.0';
console.log('accessibleName:', getAccessibleName(document.querySelector('button')))
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment