Поддержка legacy-браузеров

FAST Element — современная библиотека для создания веб-компонентов на базе стандартов Web Components. Несмотря на широкую поддержку современных браузеров, при работе с legacy-браузерами (такими как Internet Explorer 11 и ранние версии Edge, Safari или Firefox) возникает ряд специфических ограничений. Правильная настройка проекта и понимание механизма полифиллов позволяют обеспечить корректное поведение компонентов в таких средах.

Полифиллы для Web Components

Основной вызов для legacy-браузеров заключается в отсутствии нативной поддержки Custom Elements, Shadow DOM и HTML Templates. Для устранения этих ограничений применяются полифиллы:

@webcomponents/webcomponentsjs — универсальный набор полифиллов для Custom Elements, Shadow DOM, HTML Template и ES Modules.
@webcomponents/custom-elements — минимальный полифилл, необходимый для работы кастомных элементов.
@webcomponents/shadydom — реализует Shadow DOM через альтернативный механизм распределения стилей и слотов.
@webcomponents/template — полифилл для <template> и <slot>.

Для корректной работы FAST Element необходимо подключать полифиллы до инициализации компонентов:

import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';
import { FASTElement, html } from '@microsoft/fast-element';

class MyComponent extends FASTElement {
  render() {
    return html`<div>Пример компонента</div>`;
  }
}

FASTElement.define('my-component', MyComponent);

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

Обеспечение работы шаблонов и слотов

Shadow DOM в legacy-браузерах работает через имитацию (Shady DOM). FAST Element поддерживает такой подход:

Shady DOM позволяет эмулировать encapsulation стилей, но требует использования ::slotted() только в ограниченном наборе случаев.
Слоты в Shady DOM обрабатываются через проксирование содержимого: компоненты должны корректно учитывать, что динамическая вставка элементов может иметь задержку рендеринга.

Пример использования слотов с совместимостью для legacy-браузеров:

import { FASTElement, html } from '@microsoft/fast-element';

const template = html`
  <div>
    <slot name="header"></slot>
    <p>Основное содержимое</p>
    <slot></slot>
  </div>
`;

class LegacyFriendlyComponent extends FASTElement {}
FASTElement.define('legacy-friendly', LegacyFriendlyComponent, { template });

Важно проверять, что slot имеет явное имя или является слотом по умолчанию. В Shady DOM динамическая смена слотов может потребовать вызова requestUpdate().

Работа со стилями в legacy-браузерах

FAST Element использует CSSResult и css шаблоны для определения стилей компонентов. В средах без Shadow DOM стили внедряются через <style> внутри компонента. Ограничения и нюансы:

Псевдоклассы :host и :host-context() поддерживаются через трансформацию Shady DOM.
Комбинации ::slotted(*) и вложенные селекторы работают частично: лучше использовать отдельные классы для слотов.
Динамические переменные CSS (var(--custom-prop)) корректно применяются только при прямой вставке <style> в DOM компонента.

Пример декларации стилей:

import { css, FASTElement, html } from '@microsoft/fast-element';

const styles = css`
  :host {
    display: block;
    border: 1px solid #ccc;
    padding: 10px;
  }
  ::slotted(.highlight) {
    color: red;
  }
`;

class StyledComponent extends FASTElement {}
FASTElement.define('styled-component', StyledComponent, { template: html`<slot></slot>`, styles });

Поддержка событий и реактивности

FAST Element использует наблюдение свойств (@observable) и реактивный рендеринг. В legacy-браузерах:

Нативные Proxy и Reflect не поддерживаются полностью. Используется fallback через Object.defineProperty.
Асинхронные обновления шаблона (FASTElement.update()) должны выполняться через очередь microtask, чтобы избежать расхождений при Shady DOM.
Пользовательские события через dispatchEvent(new CustomEvent(...)) требуют полифилл CustomEvent для IE11:

(function () {
  if (typeof window.CustomEvent !== "function") {
    function CustomEvent(event, params) {
      params = params || { bubbles: false, cancelable: false, detail: null };
      const evt = document.createEvent('CustomEvent');
      evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
      return evt;
    }
    CustomEvent.prototype = window.Event.prototype;
    window.CustomEvent = CustomEvent;
  }
})();

Интеграция с сборщиками и транспиляция

Для работы с legacy-браузерами рекомендуется использовать транспиляторы:

Babel с пресетами @babel/preset-env и useBuiltIns: 'entry' позволяет автоматически подгружать необходимые полифиллы.
Транспиляция до ES5 необходима для IE11. FAST Element совместим с ES5, если соблюдены правила импорта полифиллов и транспиляции.
Для сборки через Webpack или Vite следует убедиться, что модули @microsoft/fast-element транспилируются и не остаются в ES6-формате.

Пример конфигурации Babel:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": { "ie": "11" },
      "useBuiltIns": "entry",
      "corejs": 3
    }]
  ]
}