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

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).