Element may not be rendered correctly depending on where tag function html is imported #232
Description
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.tsimport { 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.tsimport { 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 servein packageband open a browser to viewb/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
- Chrome
- Firefox (not tested)
- Edge
- Safari 11 (not tested)
- Safari 10 (not tested)
- IE 11 (not tested)
Versions
- lit-element: v0.6.1
- webcomponents: v2.1.3