lit-html templates in MDX highlight oddly

[bennypowers]

consider:

Here's a paragraph

```html
<!-- this code block is perfectly highlighted -->
<mwc-textfield outlined
    label="Publishable Key"
    value="dummy-key"
></mwc-textfield>
```

<Story name="A">
  {() => {
    // I'm not highlighted as JS
    function onChange({ target: { value } }) {
      $('output').textContent = value;
    }

    // custom element is weirdly highlighted
    return html`
      <mwc-textfield outlined
          label="Publishable Key"
          value="dummy-key"
          @change="${setPublishableKey}"
      ></mwc-textfield>
      <output></output>
    `
    // highlighting dies here until the next lit-html template starts
  }
</Story>

## This is not highlighted

**neither is this**

<Story name="B" height="60px">
  {() => {
    // highlighting resumes at <section
    // but dies again at </mwc-textfield
    return html`
      <section id="hmm">
        <mwc-textfield></mwc-textfield>
      </section>
    `;
  }}
</Story>

which appears in atom as per the screenshot below: