@blockquote-web-components/blockquote-directive-ariaidref-slot

blockquoteDirectiveAriaidrefSlot

This directive creates a slot element, hidden by default, with a specific name and id. The name and id of this slot should correspond to the 'slot' attribute of an element in the Light DOM. It connects the 'slot', 'name', and 'id' attributes of a slot to be used with ARIA relationships.

This slot element is used to overcome some limitations of the Shadow DOM.

aria attribute reflection

Demo

Usage

Light Dom:

<wrapper-dialog>
  <span slot="idref_">Registration - All fields are required</span>
</wrapper-dialog>

Shadow Dom:

class MyDialog extends LitElement {
  constructor() {
    super();
    this.labelledby = 'idref_';
  }

  get _labeledbyTpl() {
    return html`${this.labelledby ? blockquoteDirectiveAriaidrefSlot(this.labelledby) : ''}`;
  }

  render() {
    return html`
      <dialog aria-labelledby="${this.labelledby || nothing}"><slot></slot></dialog>
      // slot is hidden by default
      ${this._labeledbyTpl} // <slot name="idref_" id="idref_" hidden=""></slot>

      // slot not hidden
      ${this._labeledbyTpl, false} // <slot name="idref_" id="idref_"></slot>
    `;
  }
}

src/BlockquoteDirectiveAriaidrefSlot.js:

class: README

---

Variables

Name	Description	Type
blockquoteDirectiveAriaidrefSlot

---

Exports

Kind	Name	Declaration	Module	Package
js	README	README	src/BlockquoteDirectiveAriaidrefSlot.js
js	blockquoteDirectiveAriaidrefSlot	blockquoteDirectiveAriaidrefSlot	src/BlockquoteDirectiveAriaidrefSlot.js

src/index.js:

Exports

Kind	Name	Declaration	Module	Package
js	blockquoteDirectiveAriaidrefSlot	blockquoteDirectiveAriaidrefSlot	./BlockquoteDirectiveAriaidrefSlot.js