Element may not be rendered correctly depending on where tag function `html` is imported #232

jolleekin · 2018-09-29T17:29:27Z

Steps to Reproduce

Please take a look at this repo for more details.

Basically, I have two local packages a and b.

a/src/a.ts

import { LitElement } from '@polymer/lit-element';
// export { html } from '@polymer/lit-element';
export { html } from 'lit-html';

export abstract class AElement extends LitElement {
}

b/src/b.ts

import { customElement } from "@polymer/lit-element";
import { TemplateResult } from "lit-html";
import { AElement } from "a";

import { html as html_from_lit_html } from "lit-html";
import { html as html_from_lit_element } from "@polymer/lit-element";
import { html as html_from_a } from "a";

@customElement('b-1' as any)
export class B1 extends AElement {
    protected render(): TemplateResult {
        return html_from_lit_html`
            Rendered using "html" from "lit-html"
        `;
    }
}

@customElement('b-2' as any)
export class B2 extends AElement {
    protected render(): TemplateResult {
        return html_from_lit_element`
            Rendered using "html" from "lit-element"
        `;
    }
}
@customElement('b-3' as any)
export class B3 extends AElement {
    protected render(): TemplateResult {
        return html_from_a`
            Rendered using "html" from "a"
        `;
    }
}

b/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>B</title>
    <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
    <script type="module" src="lib/b.js"></script>
</head>
<body>
    <b-1></b-1>
    <br>
    <b-2></b-2>
    <br>
    <b-3></b-3>
</body>
</html>

Run polymer serve in package b and open a browser to view b/index.html

Expected Results

Rendered using "html" from "lit-html"
Rendered using "html" from "lit-element"
Rendered using "html" from "a"

Actual Results

[object Object]
[object Object]
Rendered using "html" from "a"
==> If html is not from the same package as AElement, the element is not rendered correctly

Browsers Affected

Versions

lit-element: v0.6.1
webcomponents: v2.1.3

The text was updated successfully, but these errors were encountered:

export ‘html’ module from SMElement to avoid this issue: lit/lit-element#232

sorvell · 2018-12-10T22:11:42Z

Yes, this can happen. It's important to ensure that LitElement and lit-html load compatible versions. We're doing our best to ensure that the release cadence for LitElement and lit-html is kept in sync so this is easily done.

A more long term solution that we think can make issues like this much easier to deal with is the npm singleton proposal.

Stradivario · 2019-10-02T08:31:09Z

Also this issue is affecting Monorepo approach with Yarn i will create a repository with basic concept where it is showing off.

jrobinson01 added a commit to jrobinson01/sm-element that referenced this issue Nov 23, 2018

generate declarations when building

19c7e4a

export ‘html’ module from SMElement to avoid this issue: lit/lit-element#232

sorvell closed this as completed Dec 10, 2018

zfwf mentioned this issue Mar 11, 2019

Support for lit-element with storybook/polymer storybookjs/storybook#4958

Closed

mihaisavezi mentioned this issue Jul 21, 2020

[object Object] rendered when using rollup and html template exported from symlinked project #390

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Element may not be rendered correctly depending on where tag function `html` is imported #232

Element may not be rendered correctly depending on where tag function `html` is imported #232

jolleekin commented Sep 29, 2018

sorvell commented Dec 10, 2018

Stradivario commented Oct 2, 2019

Element may not be rendered correctly depending on where tag function html is imported #232

Element may not be rendered correctly depending on where tag function html is imported #232

Comments

jolleekin commented Sep 29, 2018

Steps to Reproduce

Expected Results

Actual Results

Browsers Affected

Versions

sorvell commented Dec 10, 2018

Stradivario commented Oct 2, 2019

Element may not be rendered correctly depending on where tag function `html` is imported #232

Element may not be rendered correctly depending on where tag function `html` is imported #232