Closed ulshv closed 4 years ago
DocumentFragment
is passed instead of HTMLElement
object in getComputedStyle
.
is there any workaround to fix it?
Ok, found the workaround. It basically disables shadow-root
for custom element (using LitElement). Issue resolved.
class LineChart extends LitElement {
// ...
createRenderRoot() {
return this;
}
async renderChart({ series, xaxis }) {
await this.updateComplete;
var options = { /* ... */ };
const div = document.createElement('div');
this.appendChild(div);
var chart = new ApexCharts(div, options);
chart.render();
}
render() {}
}
hi @ulshv , i've never worked with LitElement
before but I have worked with Polymer a few years back. I heard the 2 are similar. Anyways, do you know how to take your code and use it within a vanilla js
web component? It seems straight forward but I haven't gotten it to work. I was attempting to get your example above to work with LitElement first before I convert it into a a vanilla component but I can't even get that to work 😄
Do you know what I'm doing wrong? https://codepen.io/oneezy/pen/jOVyePM
Hi @ulshv thanks for creating this issue. I'm trying to do something similar with LitElement. Did you run into any issues with ApexCharts css not being loaded / accessed? Thanks.
I was able to directly load the css within the render method.
render() {
return html`
<link rel="stylesheet" type="text/css" href="./node_modules/apexcharts/dist/apexcharts.css">
<div class="chart-container"></div>
`;
}
However, this approach is strongly not recommended by LitElement.
I also tried copying the entire css into the elements static styles = css...
block, but this didn't work.
Hi @ulshv thanks for creating this issue. I'm trying to do something similar with LitElement. Did you run into any issues with ApexCharts css not being loaded / accessed? Thanks.
Ok, found the workaround. It basically disables
shadow-root
for custom element (using LitElement). Issue resolved.class LineChart extends LitElement { // ... createRenderRoot() { return this; } async renderChart({ series, xaxis }) { await this.updateComplete; var options = { /* ... */ }; const div = document.createElement('div'); this.appendChild(div); var chart = new ApexCharts(div, options); chart.render(); } render() {} }
That is only a workaround if you don’t actually need the Shadow DOM. Also, this is not LitElement specific, I'm having the same issue with an entirely VanillaJS component I‘m writing. Here's a reduced testcase: https://codepen.io/leaverou/pen/WNEXzBe?editors=1010 I think the issue should be reopened.
Here's a workaround that enables Apex Charts to work in Shadow DOM (but reduces browser support to those that support ResizeObserver
and WeakMap
, unless polyfills/shims are used):
let ros = new WeakMap();
window.addResizeListener = function(el, fn) {
let called = false;
let ro = new ResizeObserver(r => {
if (called) { // We don't want to call it immediately
fn.call(el, r);
}
called = true;
});
if (el.nodeType === Node.DOCUMENT_FRAGMENT_NODE){
// Observe children instead
Array.from(el.children).forEach(c => ro.observe(c));
}
else {
ro.observe(el);
}
ros.set(fn, ro);
};
window.removeResizeListener = function(el, fn) {
let ro = ros.get(fn);
if (ro) {
ro.disconnect();
ros.delete(fn);
}
}
The code would need to run after Apex Charts are imported, to correctly override the addResizeListener()
and removeResizeListener()
that ship with it.
It's just something I put together right now, and has not been extensively tested, but it's a starting point.
(You'd still need to work around the CSS not being imported properly, see #238)
Great lib! Anyways, I'm not able to use it in new project which is based on web-components with LitElement. It's throwing this error:
Code example: