分配给innerHTML时无法将样式应用于锚标记

Question

我将包含锚标记的字符串分配给元素的innerHTML。我需要对这些进行设计，但是，我不确定如何去做。下面是使用Polymer.dom和updateStyles这个StackOverflow的post的建议为例：

Polymer({ 
 
    is: 'x-foo', 
 
    properties: { 
 
    value: { 
 
     type: String, 
 
     value: '<a href="//google.com">Hello</a>', 
 
     observer: 'setValue' 
 
    } 
 
    }, 
 
    
 
    setValue: function() { 
 
    Polymer.dom(this).innerHTML = this.value; 
 
    this.updateStyles(); 
 
    } 
 
});

<base href="https://polygit.org/polymer+:1.4.0/components/"> 
 
<script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
<link href="polymer/polymer.html" rel="import"> 
 

 

 
<dom-module id="x-foo"> 
 
    <style> 
 
    a { 
 
     color: red; 
 
    } 
 
    </style> 
 
    <template> 
 
    <content></content> 
 
    </template> 
 
</dom-module> 
 

 
<x-foo></x-foo>

而这里的到的jsfiddle链接： https://jsfiddle.net/cbelden/xamfhe52/

Answer 1

你并不需要调用updateStyles()。你dom-module风格应该是使用::content为目标的分布式节点：

<style> 
    ::content a { 
    color: red; 
    } 
</style> 

HTMLImports.whenReady(function() { 
 

 
    Polymer({ 
 
    is: 'x-foo', 
 
    properties: { 
 
     value: { 
 
     type: String, 
 
     value: '<a href="//google.com">Hello</a>', 
 
     observer: 'setValue' 
 
     } 
 
    }, 
 

 
    setValue: function() { 
 
     Polymer.dom(this).innerHTML = this.value; 
 
     //this.updateStyles(); // not needed 
 
    } 
 
    }); 
 

 
});

<base href="https://polygit.org/polymer+:1.4.0/components/"> 
 
<script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
<link href="polymer/polymer.html" rel="import"> 
 

 

 
<dom-module id="x-foo"> 
 
    <style> 
 
    ::content a { 
 
     color: red; 
 
    } 
 
    </style> 
 
    <template> 
 
    <content></content> 
 
    </template> 
 
</dom-module> 
 

 
<x-foo></x-foo>