scroll event not propagated in children

[huko.m...@gmail.com]

Hi,

I have a polymer element, which imports another polymer element.

The scroll events are only caught by the top level element.

How should I proceed to ensure all events are propagated down to all elements?

Thanks

[Steve Orvell]

Dom events bubble up, not down so it's not clear what you'd like to happen.

If you'd like to tell some contained element that scrolling on some outer element has occurred, there are a variety of ways to do this, but all will require that you coordinate the communication. Using custom elements, you have an opportunity to nicely encapsulate the process. If you can provide a simple example, we can suggest something more explicit.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/20aed200-9bf5-495a-9615-1672ef888409%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[huko.m...@gmail.com]

Hi,

So I think I narrowed down the problem.

I use a ui-scaffold element.

I am using a bootstrap 'affix' in the 'main' section of the ui-scaffold element. It doesn't work.

If I use the bootstrap 'affix' without the 'ui-scaffold' element, it works fine.

So I guess I should make sure I need the ui-scaffold or I'll dig into the code to see what is the problem....

[Steve Orvell]

Are the elements you want to use 'affix' on inside an element's shadowRoot?

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/1f0d490b-162b-41ad-ab4d-7978f85633e7%40googlegroups.com.

[huko.m...@gmail.com]

Yes they are.

Thanks

[Steve Orvell]

Sorry, this is not going to work. Bootstrap and jquery were written for a pre-web components world and will need to evolve to work with web components.

One of the fundamental features web components introduces is scoping, via Custom Elements and ShadowDOM. When a custom element includes elements inside its shadowRoot, these elements are intended to be scoped to it, safe from the outside world. This means css is scoped to the element's shadowRoot and the elements in the shadowRoot are not directly accessible from the document (e.g. via document.querySelector). This has massive benefits for authors of custom elements. Consider one obvious, simple example: since shadowRoots are scoped you can safely use a simple id attribute to both find and style an element. There's no worry that this id might be used elsewhere on the page or that these styles might leak in or out of the element.

There is a cost for progress: existing tools will need to evolve to work within this new world. Before web components, tools like jquery could include code like $('[data-spy]') and be relatively sure that this would find the element to be affixed, where ever it exists on the page. Now they cannot. What this means is that, when using existing tools like bootstrap and jquery, ymmv! Sometimes things will work and sometimes they will not.

Specifically, in this case:

 * The affix plugin looks like it's specifically looking for the window to scroll. This is almost certainly not what you want if it's used inside a custom element. If the custom element should affix something, then it is probably scrolling some content inside itself.

 * The data-spy attribute won't work because jquery can't find it via $ (which uses document.querySelector) . You could get around that by using affix's javascript api, since it supports passing in a node reference (e.g. $(element_reference).affix(...); ).

 * Next, the bootstrap css would need to be included in the custom element's shadowRoot.

 * Finally, the position of the affix'd element is determined via jquery's offset() method. This doesn't appear to be compatible with ShadowDOM.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/a051bee7-8b3c-45a7-badc-767515be979c%40googlegroups.com.