2

我需要为应用程序使用常用样式，但<custom-style>不起作用。includein 的属性<style></style>也不起作用。怎么做？

4

3 回答 3

11

编辑：替代方法，使用模板文字。

我意识到现在使用模板文字，我觉得这是一个更好、更自然的选择。

在shared-styles.js：

import { html } from @polymer/polymer/polymer-element.js;

export const sharedStyles = html`
    <style>
        ... various styles here ...
    </style>
`;

现在在您要使用的自定义元素文件中（my-element.js）：

import { PolymerElement, html } from @polymer/polymer/polymer-element.js;
import { sharedStyles } from './shared-styles.js';

class MyElement extends PolymerElement {

    ... element code ...

        get template() {
            return html`
                ${sharedStyles}
                <style>
                    ... your element custom styles here ...
                </style>
            `;
        }

    ... rest of your element code ...

}

对我来说，这更有意义，因为我们使用的是原生 javascript，并且避免了功能可能需要的任何额外的 polyfill include="" 。

我也认为这是一个更未来的证明，因为include=""语法并不真正在规范中，我不希望它会是？（如果我错了，谁能纠正我？）

END（替代方法）

下面的旧答案

当 3.0 上线时，这已记录在升级指南中。

请参阅本页“不太常见的升级任务”下的第一部分： https ://www.polymer-project.org/3.0/docs/upgrade

另外，请记住，您需要先导入custom-stylejs 模块才能工作。应该设在这里：polymer/lib/elements/custom-style.js

于 2018-05-17T11:24:42.967 回答
2

有同样的问题，通过手动解决：

const documentContainer = document.createElement('div');
documentContainer.setAttribute('style', 'display: none;');

documentContainer.innerHTML = `
  <dom-module id="shared-styles">
    <template>
      <style>...</style>
    </template>
  </dom-module>`;

document.head.appendChild(documentContainer);

然后你可以通过简单的导入和包含来使用它。

import './shared-styles.js';
...
static get template() {
    return `<style include="shared-styles"></style>...`;
}

我从聚合物调制器那里得到了这个解决方案，但我希望将来会有更好的方法。

于 2018-02-14T14:08:39.987 回答
0

如果我们遵循聚合物团队已经完成的工作，那么您需要myapp-styles.js如下

import {html} from '@polymer/polymer/lib/utils/html-tag.js';

/*
  custom classes for my application
*/

const template = html`
<dom-module id="myapp-styles">
  <template>
    <style>
      .bold{
        font-weight: bold;
      }
    </style>
  </template>
</dom-module>
`;
template.setAttribute('style', 'display: none;');
document.head.appendChild(template.content);

然后在组件页面中你需要导入'myapp-styles.js'；并简单地将其与自定义样式标签一起包含

<style is="custom-style" include="myapp-styles iron-flex iron-flex-alignment"></style>
于 2019-02-10T09:55:39.927 回答