分配給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>