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

1.2.4 • Public • Published

blockquoteDirectiveAriaidrefSlot

Lit

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

Open in StackBlitz

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

Package Sidebar

Install

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

Weekly Downloads

96

Version

1.2.4

License

MIT

Unpacked Size

10.1 kB

Total Files

5

Last publish

Collaborators

  • oscarmarina