Question

我正在尝试在我的mac上的localhost服务器上运行一个简单的聚合物Web组件。

我认为我已正确地遵循了教程，但#shadow根信息未出现在元素标记内（如图所示）。

导入正在运行，因为要导入Polymer.html。我无法弄清楚为什么信息没有与我设置的元素一起显示。当我在safari中运行它时，H1会短暂出现（不到一秒钟）然后消失，所以这告诉我聚合物设置正确它只是因为某些原因而没有被拉入#shadow根... / p>

我已经和他斗争了几天。

你能给予的任何帮助都会很棒并且让我更加头疼：）

干杯们!!

＆＃13;

THIS IS THE OUTPUT ON THE LOCAL HOST SERVER...


<html><head><style>body {transition: opacity ease-in 0.2s; } 
body[unresolved] {opacity: 0; display: block; overflow: hidden; position: relative; } 
</style>
    <!-- 1. Load platform support before any code that touches the DOM. -->
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <!-- 2. Load the component using an HTML Import -->
    <link rel="import" href="bower_components/polymer/polymer.html">

  </head>
  <body>
   
   <polymer-element name="bens-element" noscript="">
       
       <template>
           
           <h1>This is the shadow dom</h1>
       </template>
   </polymer-element>
    <!-- 3. Declare the element by its tag. -->
    <bens-element></bens-element>
  
</body></html>

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <!-- 1. Load platform support before any code that touches the DOM. -->
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <!-- 2. Load the component using an HTML Import -->
    <link rel="import"href="bower_components/polymer/polymer.html">

  </head>
  <body>
   
   <polymer-element name="bens-element" noscript>
       
       <template>
           
           <h1>This is the shadow dom</h1>
       </template>
   </polymer-element>
    <!-- 3. Declare the element by its tag. -->
    <bens-element></bens-element>
  </body>
</html>

＆＃13;

Answer 1

Safari还没有对shadow dom的原生支持。它能够使用polyfills运行您的聚合物应用程序。大多数浏览器尚不支持Web组件标准。在 Google Chrome 上运行该应用程序。您将看到#shadow root。

查看此页面以获取browser compatibility
的信息

~~unresolved属性用于标记页面尚未初始化。~~

编辑：

这些会导致你的问题 -

您正在使用标记的依赖关系版本

我尝试使用您正在使用的依赖项版本进行构建。结果相同。我检查过，只是标记版本。聚合物仍处于测试阶段并正在经历重大发展。您应该使用的回购的最新版本是 - 聚合物0.9.0和webcomponentsjs 0.6.1

聚合物依赖性会导致您的行为。因为我使用webcomponentsjs 0.7.0进行所有开发。使用bower来解决您的依赖关系。如果你删除bower_components文件夹bower.json并重新安装依赖项会更简单

正文标记应包含未解析的属性。

这样做是为了防止未解析的数据绑定和规则显示在浏览器中。因为聚合物的定制元素需要时间来初始化。否则你会在页面中看到很多双胡子符号 - {{}}，用于数据绑定，也缺少样式规则或空页。

WebComponents.js在初始化时将选择器body[unresolved]的样式规则添加到页面。它将不透明度设置为0 - 不可见。所以还没有显示任何内容。

在Polymer成功初始化所有自定义元素后，模板和数据绑定已解析，它将删除unresolved属性。由于在webcoponents初始化时添加了另一个body样式规则，页面会在200ms内逐渐消失。

检查head标签，了解页面初始化时添加的这两个样式规则。

聚合物网页组件#shadow root不显示

1 个答案: