Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styling web component wrapper node #209

Closed
jcfranco opened this issue Dec 27, 2018 · 4 comments

Comments

@jcfranco
Copy link

commented Dec 27, 2018

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

This comment has been minimized.

Copy link
Member

commented Jan 4, 2019

@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

This comment has been minimized.

Copy link
Author

commented Jan 4, 2019

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.

screen shot 2019-01-04 at 9 04 07 am

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

This comment has been minimized.

Copy link
Contributor

commented Jan 4, 2019

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 (w3c/webcomponents#224, w3c/webcomponents#426, w3c/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

This comment has been minimized.

Copy link
Author

commented Jan 8, 2019

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.