3

I'm trying to use the excellent Bootjack library with PolymerDart, and although the CSS theming is working, the dart code isn't executing in the Polymer component.

I've created a dead simple test showing the problem. You'll see the raw html version works fine, but the shadow DOM version doesn't.

Here is the gist. Just download as a zip, it has everything to not work ;)

Any help would be greatly appreciated.

-- Update -- After TinyFox's advice of directly wiring up the control, it now half works. I've updated the gist with the change.

-- Shane

Shane
  • 3,051
  • 3
  • 40
  • 45

2 Answers2

3

The code is not executed because the way you include the main.dart file is outdated.

use 

<script type="application/dart">export "main.dart";</script>

The dropdown still doesn't work probably because 

..on('click.bs.dropdown.data-api', _toggleEvent, selector: _TOGGLE_SELECTOR)

in packages/bootjack/src/dropdown.dart where _TOGGLE_SELECTOR is (same file)

static const String _TOGGLE_SELECTOR ='[data-toggle=dropdown]';

isn't working as expected. I guess the selector doesn't find elements inside a polymer element even if you have set applyAuthorStyles to true.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 2
    The same thing should apply to Bootstrap w/ Polymer.js. In Bootstrap, to initialize Dropdown, click events are listened at document level via jQuery against selector '[data-toggle=dropdown]'. But in [Shadow DOM spec](http://www.w3.org/TR/shadow-dom/#event-retargeting), an event bubbled out from shadow will have its event target replaced by the host element, causing the selector to miss. Bootjack & DQuery follow the exact implementation & spec of Bootstrap & jQuery, which possibly explains. – simonpai Dec 06 '13 at 11:03
  • It does seem as though the selector query isn't making it into the Shadow DOM. So I tried TinyFox's idea and it sort of worked... – Shane Dec 08 '13 at 02:58
1

zoechi's answer and my comment explains the possible cause of the problem.

To work it around, you can try to wire the element manually inside your shadow DOM, and it should be able to handle the click event by itself.

simonpai
  • 756
  • 1
  • 5
  • 4
  • Good suggestion, I tried wiring it up directly, and now the dropdown drops down, but doesn't close on a second press, even though the toggle function is called (I traced it). It looks like the Shadow DOM is really messing things up for me :( – Shane Dec 08 '13 at 02:59