分子是其他JavaScript库所涵盖的元素，可帮助轻松开发应用程序，并用于将一组插件连接到Polymer应用程序。
分子包含一个称为标记元素的元素，该元素用于包装标记库。
语法
<marked-element markdown = "text here"> <div class = "markdown-html"></div> </marked-element>
<marked-element>元素包含markdown值，并将该值显示给具有markdown-html类的子元素。通过运行以下命令，可以在应用程序中使用标记元素，将其安装在项目目录中。
bower install --save PolymerElements/marked-element
此命令将在bower_components文件夹下安装marked-element的所有相关元素。
例子
以下示例指定在Polymer.js中使用标记元素。创建一个index.html文件，并在其中添加以下代码。
<!doctype html>
<html>
<head>
<title>Polymer Example</title>
<script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel = "import" href = "bower_components/polymer/polymer.html">
<link rel = "import" href = "bower_components/paper-styles/demo-pages.html">
<link rel = "import" href = "bower_components/marked-element/marked-element.html">
<link rel = "import" href = "mark-elemnt.html">
</head>
<body>
<mark-elemnt></mark-elemnt>
</body>
</html>现在创建另一个名为mark-element.html的文件，并包含以下代码。
<link rel = "import" href = "bower_components/polymer/polymer/element.html">
<link rel = "import" href = "bower_components/marked-element/marked-element.html">
<link rel = "import" href = "bower_components/paper-styles/demo-pages.html">
//it specifies the start of an element's local DOM
<dom-module id = "mark-elemnt">
<template>
<style>
h3 {
color: orange;
margin-left: 30px;
}
marked-element {
display: block;
background-color: grey;
padding: 10px 30px;
margin-bottom: 10px;
width:250px;
}
</style>
<h2>Marked Element Example</h2>
<section>
<marked-element>
<div slot = "markdown-html"></div>
<script type = "text/markdown">
## Welcome to web176
</script>
</marked-element>
</section>
<section>
<h3>Text via Attribute</h3>
<marked-element markdown = "***Hello World!!!***">
<div slot = "markdown-html"></div>
</marked-element>
</section>
</template>
<script>
Polymer ({
is: 'mark-elemnt'
});
</script>
</dom-module>输出
要运行该应用程序，请导航到创建的项目目录并运行以下命令。
polymer serve
现在打开浏览器并导航到http://127.0.0.1:8000/。
作者：terry，如若转载，请注明出处：https://www.web176.com/polymer/2339.html
支付宝 
微信 