polyfill-support.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. /**
  2. * @license
  3. * Copyright 2017 Google LLC
  4. * SPDX-License-Identifier: BSD-3-Clause
  5. */
  6. var _a, _b;
  7. /**
  8. * LitElement patch to support browsers without native web components.
  9. *
  10. * This module should be used in addition to loading the web components
  11. * polyfills via @webcomponents/webcomponentjs. When using those polyfills
  12. * support for polyfilled Shadow DOM is automatic via the ShadyDOM polyfill, but
  13. * support for Shadow DOM like css scoping is opt-in. This module uses ShadyCSS
  14. * to scope styles defined via the `static styles` property and styles included
  15. * in the render method. There are some limitations to be aware of:
  16. * * only styles that are included in the first render of a component are scoped.
  17. * * In addition, support for the deprecated `@apply` feature of ShadyCSS is
  18. * only provided for styles included in the template and not styles provided
  19. * via the static styles property.
  20. * * Lit parts cannot be used in styles included in the template.
  21. *
  22. * @packageDocumentation
  23. */
  24. import '@lit/reactive-element/polyfill-support.js';
  25. import 'lit-html/polyfill-support.js';
  26. // Note, explicitly use `var` here so that this can be re-defined when
  27. // bundled.
  28. // eslint-disable-next-line no-var
  29. var DEV_MODE = true;
  30. var polyfillSupport = function (_a) {
  31. var LitElement = _a.LitElement;
  32. // polyfill-support is only needed if ShadyCSS or the ApplyShim is in use
  33. // We test at the point of patching, which makes it safe to load
  34. // webcomponentsjs and polyfill-support in either order
  35. if (window.ShadyCSS === undefined ||
  36. (window.ShadyCSS.nativeShadow && !window.ShadyCSS.ApplyShim)) {
  37. return;
  38. }
  39. // console.log(
  40. // '%c Making LitElement compatible with ShadyDOM/CSS.',
  41. // 'color: lightgreen; font-style: italic'
  42. // );
  43. LitElement._$handlesPrepareStyles = true;
  44. /**
  45. * Patch to apply adoptedStyleSheets via ShadyCSS
  46. */
  47. var litElementProto = LitElement.prototype;
  48. var createRenderRoot = litElementProto.createRenderRoot;
  49. litElementProto.createRenderRoot = function () {
  50. // Pass the scope to render options so that it gets to lit-html for proper
  51. // scoping via ShadyCSS. This is needed under Shady and also Shadow DOM,
  52. // due to @apply.
  53. this.renderOptions.scope = this.localName;
  54. return createRenderRoot.call(this);
  55. };
  56. };
  57. if (DEV_MODE) {
  58. (_a = globalThis.litElementPolyfillSupportDevMode) !== null && _a !== void 0 ? _a : (globalThis.litElementPolyfillSupportDevMode = polyfillSupport);
  59. }
  60. else {
  61. (_b = globalThis.litElementPolyfillSupport) !== null && _b !== void 0 ? _b : (globalThis.litElementPolyfillSupport = polyfillSupport);
  62. }
  63. //# sourceMappingURL=polyfill-support.js.map