Ability to pass in DOM Element instead of a selector

[kennyjwilli]

Passing in a selector for the search and content is not robust. It would be great if you could either pass in a DOM object or a selector. I am in a situation where the query selector will not be able to find the elements passed (web components with shadow dom), however, I am able to manually pass in the DOM objects to the Jets constructor.

[NeXTs]

Hi Kenny. No problems, I will implement this on the weekend

[kennyjwilli]

:+1:

[NeXTs]

@kennyjwilli Kenny, hello again. I'm not familiar with web components yet so I just wondering in advance how to handle css selector for web component? By passing string with id|class|name to contentTag parameter we were able to build css selector on top of it, for example if we specified contentTag parameter to be '#content' then css selector might look as:

#content > not(...) { css rule }

As you see we have to determine DOM element identifier to apply css, how do we might do it with web component?

[kennyjwilli]

I would not worry about the selector. As long as you can supply a selector then it will cover the general use case. If you allow the ability to pass in a DOM element instead of a selector then that would be perfect.

[NeXTs]

It looks like we misunderstood each other. Jets.js needs some tag identifier to build proper css rule. It will not work without that. Take a loot at lines 81-83

[kennyjwilli]

Right. So then the solution to this would be the ability to pass in this.

[NeXTs]

I'm asking not about how to handle tag inside constructor or function, that is absolutely clear. Question is how to build css rule.

By default it is

#jetsContent > :not([data-jets *= "search_query"]){ display:none; }

see

what shoud I use instead of '#jetsContent' for your component if imagine that your component does not contain some unique id or class?

HOW_TO_SPECIFY_COMPONENT? > :not([data-jets *= "search_query"]){ display:none; }

[kennyjwilli]

I understand what you are asking. The correct CSS selector would be to use the /deep/ combinator. I think a better solution would be to pass in a scoped this. This solution would allow you to use normal CSS selectors and only change the context to which that selector is applied.

[NeXTs]

Hi Kenny As I have said before I am not familiar with web components and hence are not familiar with /deep/ too. I will return to this issue when I get more free time to read about shadow dom concepts and web components.

As always, PR's are welcome

[kennyjwilli]

But what I am saying is different. You can leave the selectors the way they are and, instead, have the ability to pass in a scoped context to apply the CSS selector on.

[NeXTs]

Show me concept of your idea at codepen

[NeXTs]

Closing due to inactivity