Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Shadow DOM & Root: Failed to execute 'getComputedStyle' on 'Window' #5583

Closed
reda-alaoui opened this issue Jun 21, 2018 · 0 comments
Closed

Comments

@reda-alaoui
Copy link
Contributor

reda-alaoui commented Jun 21, 2018

Expected Behavior

In a Shadow DOM and ShadowRoot, chart.js should work properly.

Current Behavior

I am using Angular 6 with encapsulation mode Native:

/**
     * Use the native encapsulation mechanism of the renderer.
     *
     * For the DOM this means using [Shadow DOM](https://w3c.github.io/webcomponents/spec/shadow/) and
     * creating a ShadowRoot for Component's Host Element.
     */
    Native = 1,

The chart doesn't display while the following stacktrace is printed in the browser console:

ERROR TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at Object.helpers.getStyle (core.helpers.js:502)
    at Object.helpers.getMaximumWidth (core.helpers.js:481)
    at Chart.resize (core.controller.js:181)
    at Chart.initialize (core.controller.js:146)
    at Chart.construct (core.controller.js:127)
    at new Chart (core.js:42)

The issue happens at this line:

document.defaultView.getComputedStyle(el, null).getPropertyValue(property);

The debugger tells me that, at this point, el is a document-fragment.

Steps to Reproduce (for bugs)

  1. Generate an Angular project with angular-cli
  2. Add chart.js as a dependency
  3. Generate a component with encapsulation set to ViewEncapsulation.Native
  4. Add a canvas in the component
  5. Create a chart with chart.js using the canvas 2d context

Context

I want to build a Web Component displaying a chart

Environment

  • Chart.js version: 2.7.2
  • Browser name and version: Chrome 67
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants