[whatwg/dom] Proposal for Element.currentLang and Element.currentDir (#1014)

I'd like to propose the introduction of two read-only properties on the `Element` object:

```js
Element.currentLang
Element.currentDir
```

`Element.currentLang` and `Element.currentDir` are read-only properties that reflect the element's current language/direction as determined by their or their closest ancestor's `lang` and `dir` attributes, respectively.

The primary use case is to improve i18n in custom elements, but the benefit will also be seen by frameworks that currently use a separatem, non-standard context to determine these values. Exposing the current inherited language and direction will provide better localization capabilities by removing performance hurdles and eliminating the need for additional logic and special contexts.

This information isn't currently available without expensive DOM traversal. Furthermore, selectors such as `Element.closest('[lang]')` will stop if they reach a shadow root, requiring recursive logic to break out of them:

```js
// Recursive version of Element.closest() that breaks through shadow roots
function closest(selector, root = this) {
  function getNext(el, next = el && el.closest(selector)) {
    if (el === window || el === document || !el) {
      return null; 
    }
    
    return next ? next : getNext(el.getRootNode().host);
  };
      
  return getNext(root);
}

const lang = closest('[lang]', myEl).lang;
```

As a custom element author, it's not uncommon for users to have dozens of components on a page. It's also not impossible for a page to have multiple languages and directions. For components that require localization, the only way for them to inherit `lang` and `dir` is via DOM traversal or other non-standard logic. This, of course, isn't very efficient.

Being able to reference `Element.currentLang` and `Element.currentDir` will solve this in an elegant way using data the browser is likely already aware of.

Additional thoughts:

- It seems pragmatic to expect `lang` and `dir` to pass through shadow roots. If desired, the custom element author can override it by applying `lang` or `dir` to the host element or to any element within the shadow root.
- This proposal doesn't address a way to _listen_ for language/direction changes. This would be incredibly useful, but probably out of scope for discussion within this group.
- Interestingly, this is something that we can do with CSS via [`:lang`](https://developer.mozilla.org/en-US/docs/Web/CSS/:lang) and [`:dir`](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) (limited support). Unfortunately, [there's no clean way](https://codepen.io/claviska/pen/VwWejBz) to discover this value with JavaScript.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/1014