polyfill-support.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. /**
  2. * @license
  3. * Copyright 2017 Google LLC
  4. * SPDX-License-Identifier: BSD-3-Clause
  5. */
  6. var _a, _b;
  7. var SCOPED = '__scoped';
  8. // Note, explicitly use `var` here so that this can be re-defined when
  9. // bundled.
  10. // eslint-disable-next-line no-var
  11. var DEV_MODE = true;
  12. var polyfillSupport = function (_a) {
  13. var ReactiveElement = _a.ReactiveElement;
  14. // polyfill-support is only needed if ShadyCSS or the ApplyShim is in use
  15. // We test at the point of patching, which makes it safe to load
  16. // webcomponentsjs and polyfill-support in either order
  17. if (window.ShadyCSS === undefined ||
  18. (window.ShadyCSS.nativeShadow && !window.ShadyCSS.ApplyShim)) {
  19. return;
  20. }
  21. // console.log(
  22. // '%c Making ReactiveElement compatible with ShadyDOM/CSS.',
  23. // 'color: lightgreen; font-style: italic'
  24. // );
  25. var elementProto = ReactiveElement.prototype;
  26. // In noPatch mode, patch the ReactiveElement prototype so that no
  27. // ReactiveElements must be wrapped.
  28. if (window.ShadyDOM &&
  29. window.ShadyDOM.inUse &&
  30. window.ShadyDOM.noPatch === true) {
  31. window.ShadyDOM.patchElementProto(elementProto);
  32. }
  33. /**
  34. * Patch to apply adoptedStyleSheets via ShadyCSS
  35. */
  36. var createRenderRoot = elementProto.createRenderRoot;
  37. elementProto.createRenderRoot = function () {
  38. var _a, _b, _c;
  39. // Pass the scope to render options so that it gets to lit-html for proper
  40. // scoping via ShadyCSS.
  41. var name = this.localName;
  42. // If using native Shadow DOM must adoptStyles normally,
  43. // otherwise do nothing.
  44. if (window.ShadyCSS.nativeShadow) {
  45. return createRenderRoot.call(this);
  46. }
  47. else {
  48. if (!this.constructor.hasOwnProperty(SCOPED)) {
  49. this.constructor[SCOPED] =
  50. true;
  51. // Use ShadyCSS's `prepareAdoptedCssText` to shim adoptedStyleSheets.
  52. var css = this.constructor.elementStyles.map(function (v) {
  53. return v instanceof CSSStyleSheet
  54. ? Array.from(v.cssRules).reduce(function (a, r) { return (a += r.cssText); }, '')
  55. : v.cssText;
  56. });
  57. (_b = (_a = window.ShadyCSS) === null || _a === void 0 ? void 0 : _a.ScopingShim) === null || _b === void 0 ? void 0 : _b.prepareAdoptedCssText(css, name);
  58. if (this.constructor._$handlesPrepareStyles === undefined) {
  59. window.ShadyCSS.prepareTemplateStyles(document.createElement('template'), name);
  60. }
  61. }
  62. return ((_c = this.shadowRoot) !== null && _c !== void 0 ? _c : this.attachShadow(this.constructor
  63. .shadowRootOptions));
  64. }
  65. };
  66. /**
  67. * Patch connectedCallback to apply ShadyCSS custom properties shimming.
  68. */
  69. var connectedCallback = elementProto.connectedCallback;
  70. elementProto.connectedCallback = function () {
  71. connectedCallback.call(this);
  72. // Note, must do first update separately so that we're ensured
  73. // that rendering has completed before calling this.
  74. if (this.hasUpdated) {
  75. window.ShadyCSS.styleElement(this);
  76. }
  77. };
  78. /**
  79. * Patch update to apply ShadyCSS custom properties shimming for first
  80. * update.
  81. */
  82. var didUpdate = elementProto._$didUpdate;
  83. elementProto._$didUpdate = function (changedProperties) {
  84. // Note, must do first update here so rendering has completed before
  85. // calling this and styles are correct by updated/firstUpdated.
  86. if (!this.hasUpdated) {
  87. window.ShadyCSS.styleElement(this);
  88. }
  89. didUpdate.call(this, changedProperties);
  90. };
  91. };
  92. if (DEV_MODE) {
  93. (_a = globalThis.reactiveElementPolyfillSupportDevMode) !== null && _a !== void 0 ? _a : (globalThis.reactiveElementPolyfillSupportDevMode = polyfillSupport);
  94. }
  95. else {
  96. (_b = globalThis.reactiveElementPolyfillSupport) !== null && _b !== void 0 ? _b : (globalThis.reactiveElementPolyfillSupport = polyfillSupport);
  97. }
  98. export {};
  99. //# sourceMappingURL=polyfill-support.js.map