Observe the language of a node

[jakearchibald]

What problem are you trying to solve?

Let's say I'm creating a custom form input field as a custom element. The implementation includes labels, titles, alt text etc.

Ideally, like regular HTML inputs, this text should be presented in the correct locale & language, and updated if those conditions change.

What solutions exist today?

There's an algorithm for determining language which would be simple to reimplement (although it's sad that it would need to be reimplemented).

However, it gets a bit tricky when it comes to observing when to re-run this algorithm. You'd need to observe the tree between the element and the ancestor with lang (or the root) for changes to the lang attribute (on all elements in the sequence), or changes to the tree structure.

:lang() already exists as a CSS selector, but there's no way to observe changes in selector matching. I guess you could try to use this in combination with a resize observer to detect when this selector matches/unmatches.

There's a languagechange event, but this only operates on the global.

How would you solve it?

A few ideas:

node.computedLang - returns the result of determine the language of a node.

But there also needs to be a way to observe changes:

Option 1

Extend MutationObserver (or create a new LanguageObserver) to allow for observing computedLang. It feels like this should be an observer rather than an event since it's so closely linked to DOM changes.

Option 2

Provide a way to observe changes in CSS selector matching.

const result = element.matchSelector(`:lang(${element.computedLang})`);

result.addEventListener('change', () => {
  const newLang = element.computedLang;
  // …
});

This is based on window.matchMedia, but matches a selector.

Anything else?

No response

[annevk]

cc @whatwg/css @rniwa @dbaron

[domenic]

Dupe of #7039 and #7994, although the problem statement here is quite nice. Let's consolidate in the former though.