html模板中的样式标签（在Aurelia视图中）？答案

【问题标题】：Style tag inside html template (in Aurelia view)?html模板中的样式标签（在Aurelia视图中）？
【发布时间】：2016-09-02 01:24:57
【问题描述】：

我可以在 Aurelia 视图的模板中添加 <style> 标记吗？我遇到了一个特定问题，如果模板中有 <style> 标记，我的 aurelia-dialog 未正确对齐（它浮动到屏幕顶部而不是居中居中）。一旦我删除<style> 标签，一切都正确放置。为视图/模板编写 .css 类的正确方法是什么？

示例：对于我的对话框组件（类似于引导模式），我有一个 dialog.html 和一个 dialog.js 在 dialog.html 中，代码如下所示：

<template>
  <style media="screen">
    .selectedBorder {
      border: 1px solid black;
    }  
  </style>
  <ai-dialog>
    <ai-dialog-header>
      Header
    </ai-dialog-header>
    <ai-dialog-body>
      Sample body information
    </ai-dialog-body>
    <ai-dialog-footer>
      Footer info
    </ai-dialog-footer>
  </ai-dialog>
</template>

编辑：我想通了。您可以在模板中添加<style> 标签。我的问题是我有一个模板（主屏幕区域）调用另一个模板（弹出对话框）。我只需将<style> 从 dialog.html 移动到主视图的 html 中，一切正常。

【问题讨论】：

标签： css templates view styles aurelia

【解决方案1】：

这可能不是普遍的共识，但我一直在做的事情是让我的所有客户元素成为无容器的，消除标记膨胀，然后使用 id 属性对模板内容进行命名空间。例如：

someView.html:

<body>
    <avatar-pic containerless></avatar-pic>
</body>

头像-pic.html

<template>
    <section class="avatar-pic">
        ....
    </section>
</template>

头像-pic.css

.avatar-pic {
    ...styles here
}

【讨论】：