Material-components-web-components: mwc-dialog actions not shown

[davidwittenbrink]

I'm submitting a:

• [x] bug report
• [ ] feature request

What OS are you using?

macOS 10.14.5

What browser(s) is this bug affecting:

Chrome, Safari, Firefox

Current behavior:

Actions are not shown. Inside mwc-dialog's shadow dom the class mdc-dialog__actions should be given to footer#actions via classMap but it looks like some js string is inlined instead. If I assign the class manually in devtools the actions are shown.

Expected behavior:

The actions are shown as described in the docs.

Steps to reproduce:

Here is a demo of the issue:
https://codesandbox.io/s/litelement-typescript-lhkk1

Related code:
The issue appears if you use the demo code from the docs:

<mwc-dialog open>
  <div>Discard draft?</div>
  <mwc-button
      slot="primaryAction"
      dialogAction="discard">
    Discard
  </mwc-button>
  <mwc-button
      slot="secondaryAction"
      dialogAction="cancel">
    Cancel
  </mwc-button>
</mwc-dialog>

https://codesandbox.io/s/litelement-typescript-lhkk1

Other information:

These are the dependencies I'm using:

• "@material/mwc-button": "^0.11.1"
• "@material/mwc-dialog": "^0.11.1"
• "lit-element": "^2.2.1"

A screenshot of the inlined js string of the class attribute:

[e111077]

This is a loading error. You are loading lit-html multiple times which breaks directives. Both these elements already load the same version of lit-element and lit-html, so if you remove the dep, you'll see that the actions work again.

[di2pro]

@e111077 I have exactly the same issue, could you please elaborate a bit, and point to the place in this example where lit-html is being imported multiple times? Thx

I use PWA Starter Kit with the latest changes and all directives are partially broken for me and instead of class names I see exactly the same functions as on the screenshot.

[e111077]

you can run npm ls lit-html and it will show you which packages packages are importing lit-html.

You then should go through and clean up your deps so that it is only imported once.

Seeing as you are using pwa-starter-kit, which has some old dependencies, you may have installed something newer causing a conflict that may just be fixed with an npm update

[davidwittenbrink]

If I remember correctly this issue comes up if you have multiple versions of lit-html inside your bundle. I checked by running npm-ls npm ls | grep "lit-" and resolved the issue using npm-dedupe npm dedupe if I remember correctly.

[e111077]

additionally, on the broken page, you can call window.litHtmlVersions to show what versions are on the page. (you can even try this in github since they use lit)

[di2pro]

@e111077 @davidwittenbrink thx for the quick replies. So, whenever there are multiple components we need to remove duplicates in the dependencies.

[e111077]

In particular, wherever there are multiple versions of lit-html you need to deduplicate them.

On a somewhat related note, if there is multiple of the same component, that may cause a similar issue as

customElements.define('element-name', elementClass)

must be singleton for the element name. until scoped custom element registries are passed into spec.

[e111077]

cc: @justinfagnani