Why does :host(:hover) not work here?

Question

I am not able to figure out how :host(:hover) works on child custom elements of a parent custom element. Can someone explain how to make this work?

todoitem.html

<!-- import polymer-element's 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>

todoitem.dart

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");
  }

}

todowidget.html

<!-- import polymer-element's 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>

Corresponding Dart Script

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 = "";
  }
}

Upon running I see no hovering effect. How can I fix this?

Answer 1

I guess the problem is that the style tag is outside the <template> tag. It should be inside. I played around with your code (same as in your previous question) and moved the style inside the <template> tag without knowing that I was deviating from the code you posted in your question (I built the element from scratch instead copying the code from your question).