nolanlawson/index.html

## index.html
<!doctype html>
<html>
<head>
<title>ElementInternals with role</title>
<style>
label, fancy-label {
  display: block;
}
</style>
</head>
<body>
<h1>ElementInternals with role</h1>
<fancy-alert></fancy-alert>
<div role="alert" aria-label="I am a real alert"></div>
<pre id="display"></pre>
<script>
customElements.define('fancy-alert', class extends HTMLElement {
  constructor() {
    super()
    this._internals = this.attachInternals()
    display.innerHTML = `
ElementInternals default value for role     : ${this._internals.role}
ElementInternals default value for ariaLabel: ${this._internals.ariaLabel}
`.trim()
    this._internals.role = 'alert'
    this._internals.ariaLabel = 'I am a custom alert'
  }
})
</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>ElementInternals with role</title>
	<style>
	label, fancy-label {
	display: block;
	}
	</style>
	</head>
	<body>
	<h1>ElementInternals with role</h1>
	<fancy-alert></fancy-alert>
	<div role="alert" aria-label="I am a real alert"></div>
	<pre id="display"></pre>
	<script>
	customElements.define('fancy-alert', class extends HTMLElement {
	constructor() {
	super()
	this._internals = this.attachInternals()
	display.innerHTML = `
	ElementInternals default value for role : ${this._internals.role}
	ElementInternals default value for ariaLabel: ${this._internals.ariaLabel}
	`.trim()
	this._internals.role = 'alert'
	this._internals.ariaLabel = 'I am a custom alert'
	}
	})
	</script>
	</body>
	</html>