title: Trouble when trying to access instances of webcomponents in the dom in Dart?
body: <p>I have created a webcomponent called "color-item" and instantiated it throug adding its custom element tag in the html. I'we also given the elements id's like this:</p>
  
  <pre><code>&lt;color-item id="colorItem1" color_text="LimeGreen" bg_color="LimeGreen" &gt;&lt;/color-item&gt;
  &lt;color-item id="colorItem2" color_text="green" bg_color="YellowGreen" &gt;&lt;/color-item&gt;
  </code></pre>
  
  <p>The compoenents show up just fine and behave as expected. However, when I try to access those elements (in the main loop) to do some fun things on them with Dart-code I just end up with errors. Here is how I have tried to access them:</p>
  
  <pre><code>    ColorItem color_Item1 = query("#colorItem1").xtag;
      ColorItem color_Item2 = query("#colorItem2").xtag;
  </code></pre>
  
  <p>That produces the following error:</p>
  
  <pre><code>    Breaking on exception: type 'DivElement' is not a subtype of type 'ColorItem' of 'color_Item1'.
  </code></pre>
  
  <p>I'we also tried casting like this:</p>
  
  <pre><code>    ColorItem color_Item1 = query("#colorItem1").xtag(ColorItem);
      ColorItem color_Item2 = query("#colorItem2").xtag(ColorItem);
  </code></pre>
  
  <p>That produces a similar error:</p>
  
  <pre><code>    Exception: type 'DivElement' is not a subtype of type 'ColorItem' of 'color_Item1'.
      Breaking on exception: Class 'DivElement' has no instance method 'call'.
  </code></pre>
  
  <p>The component itself is defined like this:</p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
     &lt;html&gt;
     &lt;body&gt;
     &lt;element name="color-item" constructor="ColorItem" extends="div"&gt;
     &lt;template&gt;
  
     &lt;style scoped&gt;
  
        .color-box{
            cursor:pointer;
            padding:20px;            
            margin:10px;
            margin-left:0px;
            display:inline-block;
  
            width:auto;
            height:auto;
            position: relative;
            font-size: 24px;
            color:white;
            background-color:orange;
            border-radius:24px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
            user-select: none;
           }
  
      &lt;/style&gt;
  
      &lt;div class="color-box" style="background-color:{{bg_color}}; color:{{text_color}}" on-click="swapColor()"&gt; Color: &lt;b&gt;{{color_text}}&lt;/b&gt; &lt;/div&gt;
    &lt;/template&gt;
    &lt;script type="application/dart" src="ColorItem.dart"&gt;&lt;/script&gt;
    &lt;/element&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p>and the script for the component looks like this:</p>
  
  <pre><code>    import 'package:web_ui/web_ui.dart';
  
      class ColorItem extends WebComponent {
        @observable
        String color_text ="orange";
  
        @observable
        String bg_color ="orange";
  
        @observable
        String text_color ="white";
  
        @observable
        ColorItem next_color_item =null;
  
  
  
  
        List&lt;String&gt; colors = new List&lt;String&gt;()
         ..add("LimeGreen")
         ..add("green")
         ..add("yellow")
         ..add("OrangeRed")
         ..add("red")
         ..add("purple")
         ..add("blue");
  
  
       int i = 0;
  
  
       String getNextColor(){
         i++;
         i%=colors.length;
         return colors[i];
       }
  
      void swapColor(){
        String oldColor = bg_color;
        String nextColor = getNextColor();
        bg_color = nextColor;
        color_text = nextColor;
        if(next_color_item!=null){
          next_color_item.bg_color = oldColor;
        next_color_item.color_text = oldColor;
      }
  
      }
      }
  </code></pre>
  
  <p>Any suggestions?</p>