search

lit / lit-element

LEGACY REPO. This repository is for maintenance of the legacy LitElement library. The LitElement base class is now part of the Lit library, which is developed in the lit monorepo.
https://lit-element.polymer-project.org
BSD 3-Clause "New" or "Revised" License
4.49k stars 319 forks source link

Feature request: A sane IE 11 example #677

Closed cekvenich closed 5 years ago

cekvenich commented 5 years ago

the docs say ie11 is supported. However, there are no tests or examples that would work on ie11. The solution is to edit the docs and say: IE 11 is not supported.

logicalphase commented 5 years ago

So, the first thing you can do is consult the docs: https://pwa-starter-kit.polymer-project.org/ for examples. You'll see there that IE11 is supported, which kind of undercuts the idea about not wanting to.

Also, you can ask questions on the @polymer Slack beginners or general channels. Hope this relieves your worries. Let us know if we can help.

logicalphase commented 5 years ago

There is a simple example in the TRY section of LitELement docs. It requires polyfills for IE11 support. That's all explained. And yes, it requires build tools, like polymer build or rollup or webpack to work with it.

It sounds like you want features and support from modern browsers to work in a decades old browser. Your going to disappointed in that case. But it is supported if you're willing to do some build steps. I don't know of anything close to LitElement that does what you want, but maybe someone else here can help.

logicalphase commented 5 years ago

I apologize if I misunderstood. But you listed three wants in your issue:

  1. The TRY page and Getting Started in lit-element docs have very simple examples. Have you looked at those and still need help?

  2. Please refer to: https://www.npmjs.com/package/@webcomponents/webcomponentsjs#how-to-use for loading polyfills.

You can load via unpkg, which is used in examples. Have you tried, and it's not working?

  1. You need ES5 compiled. Polymer build, and and PRPL differential serving is about as simple as it gets, and your not clear on what you willing to settle for, so I don't know how to help beyond that.
logicalphase commented 5 years ago

I've tried to be helpful, and I've been a contributor and user since Polymer 2 beta through LitElement and lit HTML release. I know this software. I've sincerely tried to answer your questions. No problem, I won't make that mistake again. Hopefully someone else can help you

jsilvermist commented 5 years ago

@cekvenich Get out of here already, you ask rudely for examples in a place meant for bug reports, are rude to the person who tries to explain things to you, then imply he's unhelpful because you didn't get the response from him you wanted? Or maybe you did and were just looking for an opportunity to be negative the entire time.

This issue should be closed and locked.

iantrich commented 5 years ago

@cekvenich the context shows @hyperpress trying to be helpful and yourself being rude.

cekvenich commented 5 years ago

I'll let the thread speak for itself, even if it has been edited by all. For example, @hyperpress has deleted his comment.

ashubham commented 5 years ago

Help in this regard would be appreciated. Is there a sample which runs on IE11 ? The Glitch on the Readme seems to use modules so does not run on IE.

phetw commented 5 years ago

Hi all, I created a simple example of lit-element setup that works on IE11. Suggestions for improvement are welcome :)

sghoweri commented 5 years ago

Hi all, I created a simple example of lit-element setup that works on IE11. Suggestions for improvement are welcome :)

Thanks @phetw!!

lp74 commented 5 years ago

Hi @phetw, may you provide the same example (awesome) using webpack as packet bundler?

lp74 commented 5 years ago

Hi @phetw, I've been able to replicate the simple example using webpack. Thank you!

marcodelpercio commented 4 years ago

I agree, there's no really clear example of how to make this work on IE11. I've seen the repo sample published by @phetw but it is still confusing the setup. It says that the browser would automatically load the correct file using 2 script tags and the nomodule trick however his source code doesn't actually do that and yet it loads the polyfill. It's very confusing. The other examples don't even address that.

phetw commented 4 years ago

@marcodelpercio Essentially there are only 2 steps to make lit-element component works on IE11. First , typescript needs to be compile to javascript and javascript needs to be transpile to es5. Second, webcomponent polyfills must be included for the likes of shadow DOM etc. to work on older browsers.

PS. I have a branch specifically for the using nomodule trick here, which I decided to merg that to master to avoid anymore confusion.

juanmendes commented 4 years ago

While I agree that @cekvenich could have been more polished in his replies and started using an angry tone, couldn't the team provide a simple example that explains how to workaround the decision not to provide es5 bundles? This comment on a similar issue for lit-html mentions the following:

Yep agree, but remember lit-html is still pre-release. Imagine the team will include UMD bundles alongside ES modules for 1.0. Because yeah as you say, it's almost universal to exclude node_modules from transpilation.

I'm also struggling on how to use lit-html on a project that needs to support IE 11. I know this is for lit-element, but I believe the problem is the same: the burden of transpiling lit is offloaded to the user.

The solution also seems to be the same: use a babel plugin in your webpack/rollup/parcel configuration since lit-*** only provides es6 bundles. I really appreciate the example created by @phetw for rollup and I think it would be great to have the same for webpack. @lp74 seems to have achieved this but didn't create a minimal demo. I will try to create one and post it here.

Are there plans to provide both es6 and es5 bundles so that users don't require custom configurations and extra plugins?

juanmendes commented 4 years ago

@cekvenich Did you get it working? I think the best thing to do here is to create your own example to be a good citizen like @phetw and help others that are struggling with this. I will also try to do that.

I do really hope that lit-html provides the separate bundles so every user who cares about IE 11 doesn't have to customize their build.

cekvenich commented 4 years ago

@juanmendes Did you call me rude?? And then you ask a question of me.

web-padawan commented 4 years ago

I'm not a maintainer of this repo but let me clarify two things:

  1. It is possible to configure Babel as described here https://github.com/Polymer/lit-element/issues/883#issuecomment-577651183.
  2. You can check out https://open-wc.org/building/ for webpack & rollup presets with IE11 support

However, please do not expect same performance in IE11 as in other browsers. There are polyfill-related performance implications that are nearly impossible to fully mitigate:

  1. ShadyCSS performs CSS scoping in runtime, every time user refreshes a page
  2. ShadyDOM monkey-patches a lot of browser API (which in particular breaks DevTools).

Please keep this in mind if IE11 support is a hard requirement for your projects.