Css 使Polymer.dart元素出现，并使用Polymer.dart的样式_Css_Dart_Polymer

Css 使Polymer.dart元素出现，并使用Polymer.dart的样式

css dart polymer

Css 使Polymer.dart元素出现，并使用Polymer.dart的样式,css,dart,polymer,Css,Dart,Polymer,我正在进行我的第一个Dart项目。我已经设法制作了工作标签。但是我在使我的聚合物元素出现在web浏览器中时遇到了问题。输出应该是浅灰色的缎带，就像在Office 2007+中一样。我只能看到一条0x0px浅灰色的垂直线。如果我使用经典的HTML和CSS，那么模板就不起作用了我不明白我做错了什么这是我的HTML： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

我正在进行我的第一个Dart项目。我已经设法制作了工作标签。但是我在使我的聚合物元素出现在web浏览器中时遇到了问题。输出应该是浅灰色的缎带，就像在Office 2007+中一样。我只能看到一条0x0px浅灰色的垂直线。如果我使用经典的HTML和CSS，那么模板就不起作用了

我不明白我做错了什么

这是我的HTML：

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>CVWebkit</title>
        <link rel="stylesheet" type="text/css" href="CVWebkit.css" media="screen" />
        <script src="scripts/packages/shadow_dom/shadow_dom.min.js"></script>
        <script type="application/dart" src="scripts/cvwebkit.dart"></script>
        <script src="scripts/packages/browser/dart.js"></script>
    </head>
    <body>

          <polymer-element name="zone-ruban">
                <template>
                <link rel="stylesheet" type="text/css" href="./CVWebkit.css"/>
                <div class="ruban">
                  <template repeat="{{zone in zones}}">
                    <div id="{{zone}}">
                      <template repeat="{{fonction in fonctions}}">
                        <img src="{{fonction}}"/>
                        <span class="titre_ruban">{{fonction}}</span>
                      </template>
                    </div>
                </template>
                </div>
                </template>
              </polymer-element>
    </body>

CSS：

.ruban {
    background-color: transparent;
    top:0px;
    height: 100%;
    border-right: 1px solid grey;
    position: inherit;
}

#navigation{
    width:10%;
}

#composants{
    width:25%;
    left:10%;
}

#propcompo{
    width:40%;
    left:35%;
}

#utilisateur{
    width:25%;
    left:75%;
}

.titre_ruban {
    left:0%;
    width:100%;
    bottom:0px;
    position:inherit;
    text-align:center;
    color:gray;
    text-shadow : 0px -1px 1px #000 ;
    height:15%
}

.contenu_ruban {
    top:0px;
    height:85%;
    left:0px;
    width:100%;
    vertical-align:central;
    position:inherit;
}

.user_menu {
    display:none;
}

知道为什么丝带没有出现吗？

我想你需要这样的东西

:host {
  display: block;
}

在你的CSS元素中

:host {
  display: block;
}