LWC OSS recipes ShadowRoot not defined on Edge browser

luminixinc commented 5 years ago

Description

Compiling the latest master branch lwc-recipes-oss results in Javascript that does not load in the Edge browser.

Steps to Reproduce

Follow the installation instructions for lwc-recipes-oss
Latest commit tested : 8f248ce Custom npm module resolution (#41)
npm run build:development or npm run build
npm run serve

Loading in the Edge browser shows the following error (see attachment):

ReferenceError: 'ShadowRoot' is not defined

  4416 |  * SPDX-License-Identifier: MIT
  4417 |  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  4418 |  */
> 4419 | const ShadowRootHostGetter = getOwnPropertyDescriptor(ShadowRoot.prototype, 'host').get;
  4420 | const ShadowRootInnerHTMLSetter = getOwnPropertyDescriptor(ShadowRoot.prototype, 'innerHTML').set;
  4421 | const dispatchEvent = 'EventTarget' in window ? EventTarget.prototype.dispatchEvent : Node.prototype.dispatchEvent; // IE11
  4422 |

Expected Results

The Lightning Web Components OSS examples load and run as expected.

Actual Results

Error is thrown as shown.

Browsers Affected

Edge browser 44.18362.387.0

Version

LWC: 1.1.0
lwc-services: 1.3.3
lwc-recipes-oss: 0.2.0

Possible Solution Because it appears that LWC components work in Salesforce orgs, please include the appropriate polyfill(s) in the OSS verison of the LWC compiler, thank you!

Additional context/Screenshots

Gr8Gatsby commented 5 years ago

There is a dedicated repo for these samples: https://github.com/trailheadapps/lwc-recipes-oss @muenzpraeger, I can't transfer the issue to this repo.

luminixinc commented 5 years ago

Note that I was originally planning to ticket this issue in lwc-recipes-oss repo, but the issue system there reported the following:

NOTICE: Please use the bug report only for reporting bugs on the application itself.

For general bugs with Lightning Web Components Open Source visit the LWC repository on https://github.com/salesforce/lwc.

And since this issue appears to be in the engine.cjs.js file, I decided that the ticket should be issued here. But feel free to move it if I'm mistaken :)

muenzpraeger commented 5 years ago

It's neither lwc-recipes-oss not lwc (kinda).

The issue is that the default installation of create-lwc-app doesn't add the synthetic shadow to the index.js (Edge doesn't understand native shadow DOM). Sadly it's not yet officially documented anywhere. Hint, hint, @Gr8Gatsby ;-)

In addition to that the index.js also uses a property that Edge doesn't understand yet.

@luminixinc I published a new beta of create-lwc-app that will fix that for new project. Just run npx create-lwc-app@beta your-app to test it. lwc-recipes-oss will be updated in a bit (I'm on mobile atm, so there's that).

luminixinc commented 5 years ago

A colleague reports that the npx create-lwc-app@beta your-app asks a new question about Edge support and that appears to work. I have not been successful running this npx command. I guess I'm somehow not receiving the latest beta create-lwc-app package. Please keep us informed to progress for the lwc-recipes-oss repo, thanks!

muenzpraeger commented 5 years ago

@luminixinc I've added this PR to lwc-services-oss, which shows you what to modify in your local clone for Edge.

luminixinc commented 5 years ago

@muenzpraeger excellent, thank you, this appears to be working for us now! Feel free to close the ticket.

salesforce / lwc