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.
On Mon, Feb 24, 2014 at 5:34 AM, <[email protected]> wrote:
> Yes they are.
>
> Thanks
>
>
> On Friday, February 21, 2014 7:47:25 PM UTC-5, Steve Orvell wrote:
>
>> Are the elements you want to use 'affix' on inside an element's
>> shadowRoot?
>>
>>
>> On Fri, Feb 21, 2014 at 12:59 PM, <[email protected]> wrote:
>>
>>> 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....
>>>
>>>
>>>
>>> On Friday, February 21, 2014 3:18:03 PM UTC-5, Steve Orvell wrote:
>>>
>>>> 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.
>>>>
>>>>
>>>> On Fri, Feb 21, 2014 at 12:09 PM, <[email protected]> wrote:
>>>>
>>>>> 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
>>>>>
>>>>> 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 [email protected].
>>>>>
>>>>> To view this discussion on the web visit https://groups.google.com/d/
>>>>> msgid/polymer-dev/20aed200-9bf5-495a-9615-1672ef888409%40googl
>>>>> egroups.com.
>>>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>>>
>>>>
>>>> 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 [email protected].
>>> To view this discussion on the web visit https://groups.google.com/d/
>>> msgid/polymer-dev/1f0d490b-162b-41ad-ab4d-7978f85633e7%
>>> 40googlegroups.com.
>>>
>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>
>>
>> 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 [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/polymer-dev/a051bee7-8b3c-45a7-badc-767515be979c%40googlegroups.com
> .
>
> For more options, visit https://groups.google.com/groups/opt_out.
>
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CA%2BrMWZg10qdatr8NWRVFQvgYcotzaQdN5veCtBF6-oJFRvfqmQ%40mail.gmail.com.
For more options, visit https://groups.google.com/groups/opt_out.
