问题描述
我无法弄清楚:host(:hover)
如何在父自定义元素的子自定义元素上工作.有人可以解释如何进行这项工作吗?
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?
<!-- 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
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
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>
对应的Dart脚本
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?
推荐答案
我想问题是样式标签在<template>
标签之外.它应该在里面.我玩弄了您的代码(与上一个问题相同),并在<template>
标记内移动了样式,却不知道我与您在问题中发布的代码有所不同(我从头开始构建元素,而不是从中复制代码.您的问题).
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).
这篇关于为什么:host(:hover)在这里不起作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!