Why is: host (: hover) not working here?

I can't figure out how the :host(:hover)

parent custom element works on child custom elements. Can someone explain how to do this?

<!-- import polymer-element definition -->
<link rel="import" href="packages/polymer/polymer.html">

<polymer-element name="my-li" extends="li">
  <style>
      :host(:hover){
      color: red;
    }
  </style>
  <template>
    <content></content>
  </template>
  <script type="application/dart" src="todoitem.dart"></script>
</polymer-element>

      

        
        
        
      

    

import 'package:polymer/polymer.dart';
import "dart:html" as html;

import 'package:logging/logging.dart';

final Logger _widgetlogger = new Logger("todo.item");

@CustomTag('my-li')
class MyListElement extends html.LIElement with Polymer, Observable {

  factory MyListElement() => new html.Element.tag('li', 'my-li');

  MyListElement.created() : super.created() {
    polymerCreated();
  }

  @override
  void attached() {
    super.attached();
    _widgetlogger.info("todoitem attached");
  }

  @override
  void detached() {
    super.detached();
    _widgetlogger.info("todoitem detached");
  }

}

      

        
        
        
      

    

<!-- import polymer-element definition -->
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="todoitem.html">
<polymer-element name="todo-widget" attributes="title">
  <template>
    <style>
    :host(.colored){
      color: blue;
    }
    </style>
    <div>
      <h1>{{title}}</h1>
      <div>
        <input id="inputBox" placeholder="Enter Todo item" on-change="{{addToList}}">
        <button id="deleteButton" on-click="{{deleteAll}}">Delete All</button>
      </div>
      <ul id="todolist">
      </ul>
    </div>
  </template>
  <script type="application/dart" src="todowidget.dart"></script> 
</polymer-element>

      

        
        
        
      

    

import 'package:polymer/polymer.dart';
import "dart:html" as html;
import "todoitem.dart";

import 'package:logging/logging.dart';

final Logger _widgetlogger = new Logger("todo.widget");

@CustomTag('todo-widget')
class TodoWidget extends PolymerElement {

  @published String title;
  html.InputElement todoInput;
  // html.ButtonElement deleteButton;
  html.UListElement todolist;

  @override
  void attached() {
    super.attached();
    todolist = $["todolist"];
    todoInput = $["inputBox"];
  }

  TodoWidget.created() : super.created() {
    //This can go into template!!!
    if (title == null) {
      title = "My Todo App";
    }
    ;
  }

  void deleteAll(html.Event e, var detail, html.Node target) {
    _widgetlogger.info("All items deleted");
    todolist.children.clear();
//    print("Clicked");
  }

  void addToList(html.Event e, var detail, html.Node target) {
    _widgetlogger.info("Item added");
    MyListElement li = new MyListElement();
    li
        ..text = todoInput.value
        ..classes.add("todoitem")
        ..onClick.listen((e) => e.target.remove());
    todolist.children.add(li);
    todoInput.value = "";
  }
}

      

        
        
        
      

    

I don't see the hover effect on startup. How can I fix this?