为什么:host(:hover)在这里不起作用

Question

我无法弄清楚:host(:hover)如何处理父自定义元素的子自定义元素。有人能解释一下如何做到这一点吗？

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>

对应飞镖脚本

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

跑步时，我看不到悬停效果。我该怎么解决这个问题？

Answer 1

我想问题是样式标记在<template>标记之外。它应该在里面。我在不知道我偏离了你在问题中发布的代码的情况下（我从头开始构建元素，而不是从你的问题中复制代码），摆弄了你的代码（和你在上一个问题中一样），并在<template>标记中移动了样式。