Question

我需要为app使用常见样式，但<custom-style>不起作用。 include中的属性<style></style>也不起作用。怎么做？

Answer 1

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

我意识到有，我觉得更好，更多现在正在使用模板文字。

在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和避免include=""可能需要的任何额外的填充物功能。

由于include=""语法，我还认为这是未来的证据是不是真的在规范，我不指望它会？（任何人都可以纠正我如果我错了吗？）

END（替代方法）

OLD以下答案

3.0上线后，升级指南中已经记录了这一点。

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

另外，请记住，您需要先将custom-style导入js模块才能生效。应位于此处：polymer/lib/elements/custom-style.js

Answer 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>...`;
}

我从polymer-modulizer得到了这个解决方案，但我希望将来会有更好的方法。

Answer 3

如果我们遵循聚合物团队已经完成的工作，那么您需要如下的 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>

如何在聚合物3预览中使用自定义样式或共享样式

3 个答案: