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>标签内，却不知道我偏离了你在问题中发布的代码（我从头开始构建元素而不是复制来自你问题的代码）。

为什么：host（：hover）在这里不起作用？

1 个答案: