Discussion on: Web Components: from zero to hero

View post

Replies for: You are correct, you'd have to use slots and shadow DOM to achieve something like this. Do you mind me asking what your use case for this is though...

Pascal, thanks for the clarification.

What I find somewhat confusing with custom elements is they don't behave like normal elements. For example:

<div>Hello
  <div>Neville</div>
</div>

displays "Hello Neville" whereas:

<custom-element>Hello
  <custom-element>Neville</custom-element>
</custom-element>

Only displays 'Hello'.

I've put up a sample of what I'm trying to accomplish at: stackblitz.com/edit/create-lit-app...

What I want is to have a Web Component that expands & collapses the Web Components nested inside it.

For some reason I don't yet understand the demo app is not working correctly, ie. there is no animation for the transition specified in card-element and the height doesn't reduce to zero.

The same sample without using card-element works perfectly. ie. Replace <card-element> in <container-element> with <div style="transition-...>

I assume that my current lack of knowledge with Shadow DOM will explain the underlying issue, or not. ;-)

Pascal Schilp • Nov 1 '18 • Edited

Hi Neville, I quickly hacked together this example for you:
stackblitz.com/edit/create-lit-app...

I hope that helps you :-) Feel free to reach out if you have any more questions.

Neville Franks • Nov 1 '18

Hi Pascal, that's great and works perfectly and is simpler. Any idea why my code didn't work, just curious.

Pascal Schilp • Nov 1 '18 • Edited

in card-element.js, change:

const el = this.querySelector( 'h1' )

to:

const el = this.shadowRoot.querySelector( 'div' );

When querying for DOM in web components, you want to target the shadowRoot. Also, you were querying for and changing the height of the h1, while really, you wanted to change the height of the container div.

And you had a bunch of js you didnt really need 😛LitElement will take care of your properties for you. You can use your own getters and setters, but we didn't really need to here. I'll expand more on LitElement in part two of this blog series.

Neville Franks • Nov 1 '18 • Edited

Thanks again, much to learn about shadow dom and LitElement. Happy enough though for my first week.

Can I suggest you include some downloadable examples in future articles. Stackblitz is awesome as well.

Often we just get pieces of Javascript which are great at explaining things, but when we try and run something like LitElement for the first time we get stuck with build tools and errors in the Browser until we get everything sorted out.

I hadn't found github.com/thepassle/create-lit-app when I started last Monday, which was a pity. I like Parcel.js which is what I'm using, but it took some time to get code that ran without errors.

I'll look forward to your future articles.

PS. My wife is Dutch. Amsterdam is great. ;-)

Pascal Schilp • Nov 1 '18 • Edited

Yeah, takes some time to get used to web components, but when everything clicks they're well worth it (especially LitElement).

As for downloadable examples, you can find the source code of this blog over here: github.com/thepassle/webcomponents...
(You can run it locally with python -m SimpleHTTPServer 8000, or any other method of serving)

Feel free to reach out if you have any more questions, you can find me on twitter, and usually on the polymer slack.