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

Question

我正在将包含锚标记的字符串分配给元素的 innerHTML。我需要设计这些样式，但是，我不确定该怎么做。这是一个使用 Polymer.dom 和 updateStyles 的例子，正如这个 Whosebug :

所建议的

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 的 link： 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>

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

Cannot apply style to anchor tag when assigning to innerHTML

polymer

polymer-1.0