webcomponents / polyfills

Web Components Polyfills
BSD 3-Clause "New" or "Revised" License
1.13k stars 166 forks source link

IE11, simple Angular custom element with shadowdom causes Out of stack space / stack overflow #435

Open btmurrell opened 3 years ago

btmurrell commented 3 years ago

Description

I have a very simple component developed using Angular 11 Elements with their createCustomElement framework. I require slots, so I am using Angular's ViewEncapsulation.ShadowDOM. When built this way, and including @webcomponents/webcomponentsjs@2.5.0 webcomponents-loader.js, I get this error under IE11:

SCRIPT28: Out of stack space
webcomponents-sd-ce-pf.js (65,290)
SCRIPT2343: Stack overflow at line: 65

I know this error has been historically reported to this project. This example has the latest version of Angular, webcomponentsjs and IE11, yet the Out of stack space error persist. I have reported this on stack overflow here which includes a very miminmal project to demonstrate this. Adding an issue here in hope to raise visibility to this polyfills project. From the limited error information, it is not clear where the root cause exists.

Example

See this stack overflow report for full details; this error situation can be easily exhibted on Windows 10 with IE11.

  1. Clone https://github.com/btmurrell/ng11-custom-el-shadow-ie11.git
  2. Install the project
  3. Build the component
  4. serve the component
  5. view the page in IE11
git clone https://github.com/btmurrell/ng11-custom-el-shadow-ie11.git
cd  ng11-custom-el-shadow-ie11
npm i
npm run build:comp
npm run serve:comp

Steps to reproduce

In IE11, navigate to http://localhost:8080, then inspect element to expose dev tools, then reload to see the error in the IE11 console.

Expected behavior

A rendered form from the enclosed simple web component.

Actual behavior

console error:

SCRIPT28: Out of stack space
webcomponents-sd-ce-pf.js (65,290)
SCRIPT2343: Stack overflow at line: 65

Version

@webcomponents/webcomponentsjs@2.5.0

Browsers affected

tylerl-ms commented 3 years ago

I'm seeing a similar error with our Web Component based page.

SCRIPT28: Out of stack space get-own-property-symbols.max.js (101,11) SCRIPT2343: Stack overflow at line: 65

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Maxim-Mazurok commented 2 years ago

Getting same error in AngularJS app trying to use Vue 3 custom components:

image

Using https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.6.0/webcomponents-bundle.js

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.