@blockquote-web-components/blockquote-directive-ariaidref-slot v1.1.10

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

Exports

src/index.js:

Exports