Определить изменение локали, унаследованное от родительского элемента. - PullRequest
Новая
       5

Определить изменение локали, унаследованное от родительского элемента.

1 голос
/ 13 февраля 2020

Я пытаюсь написать пользовательский элемент с поддержкой локали. Чтобы отформатировать вывод, он ищет атрибуты lang для себя и своих родительских элементов, возвращаясь к браузеру navigator.language Локализация пользовательского интерфейса. 

format (d, m, s) {
    const lang = (this.closest('[lang]') || document.querySelector('html')).lang;

    let list = navigator.languages;
    try {
        list = Intl.getCanonicalLocales(lang);
    } catch (e) {}

    const format = new Intl.NumberFormat(list, {
        maximumFractionDigits: 2
    }).format;

    return `${d}° ${m}′ ${format(Math.round(s * 100) / 100)}″`;
}

Это даст мне наилучшую возможную информацию каждый раз, когда Компонент меняет свою стоимость. Но он не охватывает случаи, когда атрибут lang изменяется во время выполнения. Если атрибут изменяется на самом компоненте, я могу наблюдать его изменение: 

static get observedAttributes() { return ['lang']; }

attributeChangedCallback (name, oldValue, newValue) {
  if (name === 'lang') // trigger re-rendering
}

Но как бы я go об обнаружении изменения, если оно происходит на родительском элементе или даже в пользовательском интерфейсе браузера, из которого параметр наследуется?

A MutationObserver представляется неудобным выбором: мне нужно было бы присоединить его к каждому элементу в родительской цепочке, но я не могу предположить, что этот список останется stati c - мне придется заново присоединять Observer к каждому adopted или connected событию компонента.

1 Ответ

0 голосов
/ 18 февраля 2020

Возможное решение состоит в том, что при добавлении элемента на страницу он рекурсивно ищет first parent / ancestor, который имеет атрибут lang, добавляет к нему MutationObserver и отвечает на изменяется на этот указанный c родительский элемент.

ИМО, пытающаяся наблюдать за изменениями для всех родителей, является неэффективным выбором дизайна и также звучит как функция излишества.

Я не пробовал это лично, но обнаружил изменение в языке браузера, посмотрите на событие languagechange.

...