Styling web component wrapper node

[jcfranco]

Is there a recommended approach to style the root of a web component? Custom web components have a wrapper node and I couldn't find anything on it in the README nor the tutorials.

The went with following in the meantime:

foo-bar/index.m.css

/* custom element selector */
foo-bar { /* ... */ }

/* theme */
.root { /* ... */ }

/* fixed */
.rootFixed { /* ... */ }

I figured that adding a custom element selector would be fine since registered custom element names are expected to be unique anyways. Please let me know if there's a better way to do this.

[agubler]

@jcfranco My first question would be why would you need to style the placeholder node of the custom element? Once the CE is hydrated and rendered, then it is appended to the placeholder node so styling the root of the widget should be all that is needed.

[jcfranco]

Maybe I'm doing something wrong, but in my case, without a custom element selector, the content overflows and the placeholder element won't be sized to its content.

My render method looks something like this:

protected render(): DNode {
  const { icon, size = defaultIconSize } = this.properties;

  if (this._spritesheet) {
    this._spritesheet.attach(this._root, `${icon}-${size}`);
  }

  return dom({
    node: this._root,
    attrs: {
      height: `${size}`,
      width: `${size}`,
      viewBox: `0 0 ${size} ${size}`
    }
  });
}

and renders the following:

<ui-icon icon="banana" size="32">
  <svg height="32" width="32" viewBox="0 0 32 32">...</svg>
</ui-icon>
<ui-icon icon="3d-glasses" size="32">
  <svg height="32" width="32" viewBox="0 0 32 32">...</svg>
</ui-icon>

[matt-gadd]

Hey @jcfranco, yeah this is currently an issue for our custom element output as custom elements default to display: inline, which is not always desirable. This has been discussed a few times over at w3c (WICG/webcomponents#224, WICG/webcomponents#426, WICG/webcomponents#468). In the Custom Element Showcase we end up adding a class to the elements to control this: https://dojo.github.io/examples/custom-element-showcase/

As a proposal for v5, I think an additional option per element for @dojo/cli-build-widget to define an element as inline or inline-block makes sense. In the custom element handler we can then add the appropriate style for you. This could then still be overridden by a user with !important if needed.

In the mean time using the element selector like you put in your original issue seems reasonable 👍

[jcfranco]

@matt-gadd Thanks for the info, I was not aware of the ongoing discussion. 😄

Adding a build option per element sounds good.

Closing since my proposed workaround seems fine and v5 would simplify this process.