Shoelace: Incorrect import paths in documentation?

[NullVoxPopuli]

Describe the bug
Documentation says:

import { Button } from '@shoelace-style/shoelace/dist/custom-elements';

customElements.define('sl-button', Button);

but in this file,
node_modules/@shoelace-style/shoelace/dist/custom-elements/index.mjs
I see:

const defineCustomElements = () => {
  [
  SlAlert,
  SlAvatar,
  SlBadge,
  SlButton,
  SlCheckbox,
  SlColorPicker,
  SlDetails,
  SlDialog,
  SlDrawer,
  SlDropdown,
  SlForm,
  SlIcon,
  SlInput,
  SlMenu,
  SlMenuDivider,
  SlMenuItem,
  SlMenuLabel,
  SlProgressBar,
  SlProgressRing,
  SlRadio,
  SlRange,
  SlRating,
  SlSelect,
  SlSpinner,
  SlSwitch,
  SlTab,
  SlTabGroup,
  SlTabPanel,
  SlTag,
  SlTextarea,
  SlTooltip
  ].forEach(cmp => customElements.define(cmp.is, cmp));
};

export { SlAlert, SlAvatar, SlBadge, SlButton, SlCheckbox, SlColorPicker, SlDetails, SlDialog, SlDrawer, SlDropdown, SlForm, SlIcon, SlInput, SlMenu, SlMenuDivider, SlMenuItem, SlMenuLabel, SlProgressBar, SlProgressRing, SlRadio, SlRange, SlRating, SlSelect, SlSpinner, SlSwitch, SlTab, SlTabGroup, SlTabPanel, SlTag, SlTextarea, SlTooltip, defineCustomElements };

So the import would be:

import { SlButton } from '....';

Using 2.0.0-beta.7

Additionally, is there an import path to only import what I need? how would tree-shaking work? is that a stencil issue?

[NullVoxPopuli]

When using the correct path, I get this error:

ReferenceError: HTMLElement is not defined
    at eval (webpack://.../node_modules/@shoelace-style/shoelace/dist/custom-elements/index.mjs?:86:19)

are there required JS dependencies?

[claviska]

I'm asking about this in the Stencil Slack room. I can't get them working locally either, which is really strange, since I had it working not long ago.

I'll update this once I have an answer.

[claviska]

The paths are correct. I have them working in this example repo. The only thing I'm still having trouble with is icons not loading.

If you run the example repo you'll see this error in the console.

TypeError: Failed to construct 'URL': Invalid base URL

I'm still looking into this, but everything else appears to be working.

[NullVoxPopuli]

What was the difference from when you didn't have things working to when you got them working?

[claviska]

It's embarrassing to say — in a pre-stable version of Stencil, one of the custom elements distributions was consumable by the browser. The dist-custom-elements-bundle that Shoelace uses it not, and I wasn't using webpack this time around. 🤦🏻‍♂️

The webpack example shows a minimal config that's working (except for the icon issue).

[claviska]

In collaboration with the Stencil team, we figured out why this build was acting up and a fix has been added in @stencil/[email protected]. This is a "next" release, but I've temporarily upgraded Shoelace to use it given the critical nature of the bug.

The next Shoelace release (2.0.0-beta.8) will be available in a day or so, and will contain the updated docs plus the updated Stencil version. The webpack example repo has already been updated.

Thanks for your patience during this early phase of the project! 😅