Imported superclass not rendering

[luaVolk]

Im working on a monorepo and I have a really simple base class to be extended by my custom elements. But when import it from the modules it just doesn't render. The file is being imported fine since everything else still runs and the render function is executed, except nothing gets rendered. The element gets a shadow DOM but its empty.

// base.ts
import { LitElement, property } from 'lit-element';

export abstract class TElement extends LitElement {

  @property({ type: String, reflect: true }) type = 'default';

}

//t-button.ts
import { html, property, query, customElement } from 'lit-element';

import { TElement } from "@t/t-base";

import {style} from './t-button.css.js';

@customElement('t-button')
export class TButton extends TElement {
  static styles = style;

  render() {
    console.log('got executed');

    return html`
      <div id="button">
        <slot></slot>
      </div>
    `;
  }
}

I tried the following too

import { TElement } from "../node_modules/@t/t-base/lib/base.js";
import { TElement } from "../../base/lib/base.js";

If i move the base.js file to the same directory and import it then it works for some reason.

import { TElement } from "./base.js"; // Works

[danielbarion]

Hi,
If when you move the file to the same directory, the extends works, maybe can be a structural problem, what are you using to build your app? (rollup, webpack, ...)

I did your idea recently.
I have a base custom class to use in my components... You can take a look in this answer to see more details: #824 (comment)

[sammyrc34]

I'm experiencing the same problem with a superclass of my own creation, when attempting to import into another module only. I've done some digging and have identified the cause.

I should also mention that I'm using Webpack, which contributes to problem.

Assume for a moment that you have module A and module B. When you're extending a LitElement component from module A in module B, presumably providing some content to render via LitElement's html and css builders, there needs to be an additional local import of LitElement. Even if LitElement from both modules are the same version, the paths are different as far as Webpack is concerned, and so they're both bundled.

Now consider this line of code from LitElement:
https://github.com/Polymer/lit-element/blob/2e97b8d8db56f634975c5edbb6cbf3408cf2be7a/src/lit-element.ts#L198

This checks if the result from render() on your component in module B is a class of LitElement's html template class. However since Webpack has kindly separated out LitElement from modules A and B, the instanceof check fails, and therefore the component will fail to render.

In such cases where you want to import and modify LitElement components from other modules, you essentially have a couple of options:

1. Re-export LitElement's classes from module A into module B
2. Use a CDN package ( I couldn't get this to work ) and setup webpack externals
3. Use Webpack's alias to coerce lit-element into a single instance in the bundle.

I went with option 3, which is working well.

[sorvell]

It's not clear from the initial, but perhaps this is just a WebPack issue and is addressed by the previous comment. If that's not the case, please feel free to re-open this issue, providing a reproduction and/or a detailed description of your build setup. Thanks.