聚合物紙輸入只在影子dom中，在瀏覽器中不可見

我是聚合物（2.0）的全新品牌，所以我只是在試用一個示例應用程序。我想創建一個帶有兩個紙張輸入字段的基本「登錄」屏幕。聚合物紙輸入只在影子dom中，在瀏覽器中不可見

我會告訴你我到目前爲止所得到的。

我的index.html：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <link rel="import" href="./bower_components/webcomponentsjs/webcomponents-lite.js"> 
     <link rel="import" href="./bower_components/polymer/polymer.html"> 
     <link rel="import" href="./testing/login-page.html"> 
    </head> 
    <body unresolved> 
     <login-page></login-page> 
    </body> 
</html>

我的登錄-page.html中，這是一個名爲 '測試'

<dom-module id="login-page"> 
    <template> 
     <h2>Hello!</h2> 
     <paper-input label="test">test</paper-input> 
    </template> 
    <script> 
     Polymer({ 
      is: 'login-page', 
      properties: { 
       prop1: { 
        type: String, 
        value: 'login-page', 
       }, 
      } 
     }); 
    </script> 
</dom-module>

我已經安裝的文件夾中使用以下命令使用鮑爾輸入：bower install paper-input

問題是，它沒有顯示出來，但是當我檢查頁面時它出現在影子中。 h2標籤中的所有內容都顯示出來了。再一次，我是聚合物的全新人物，所以我做錯了什麼？

來源

2017-05-05 RandomStranger

你導入'紙input'元素在'登錄-page'元素？你有沒有安裝2.0版本的元素而不是1.X版本？ –

下面的答案，我已經安裝了2.0版本，它的工作！我只是有一些關於命令的問題，請參閱我的評論 – RandomStranger

如果您使用Polymer 2.0，則需要使用#2.0-preview後綴下載元素。

在你的情況

bower i --save PolymerElements/paper-input#2.0-preview

，然後導入它在你的頁面

<link rel="import" href="/bower_components/paper-input/paper-input.html">

來源

2017-05-05 12:54:45

這工作！有關命令的幾個問題，命令中'i'的用途是什麼，並且--save和install之間有區別嗎？ – RandomStranger

它是安裝的簡寫。 '--save'表示將該命令保存到'bower.json'。這意味着在將來的某個地方，您可以通過1個命令安裝所有的依賴關係 - 「bower install」。建議使用'--save'標誌。因爲一旦你想與他人分享你的應用程序，你不需要發送整個'bower_components'文件夾。只有'bower.json'和你的文件夾與元素 –

有道理，非常感謝你！ – RandomStranger

聚合物紙輸入只在影子dom中，在瀏覽器中不可見

回答

相關問題