Polymer - Molecules Elements

Molecules are elements which are covered with other JavaScript libraries, that help develop an application easily and is used to connect a group of plugins to the Polymer application.

Molecules includes an element called marked-element which is used for wrapping the marked library.


<marked-element markdown = "text here">
   <div class = "markdown-html"></div>

The <marked-element> element contains the markdown value and displays that value to a child element with the markdown-html class. You can use the marked-element in your application, by running the following command to install it in your project directory.

bower install --save PolymerElements/marked-element

This command will install all the related elements of marked-element under the bower_components folder.


The following example specifies the use of marked-element in Polymer.js. Create an index.html file and add the following code in it.

<!doctype html>
      <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">

Now create another file called mark-element.html and include the following code.

<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">
         h3 {
            color: orange;
            margin-left: 30px;
         marked-element {
            display: block;
            background-color: grey;
            padding: 10px 30px;
            margin-bottom: 10px;
      <h2>Marked Element Example</h2>
            <div slot = "markdown-html"></div>
            <script type = "text/markdown">
               ## Welcome to Tutorialspoint
         <h3>Text via Attribute</h3>
         <marked-element markdown = "***Hello World!!!***">
            <div slot = "markdown-html"></div>
      Polymer ({
         is: 'mark-elemnt'


To run the application, navigate to the created project directory and run the following command.

polymer serve

Now open the browser and navigate to Following will be the output.

Polymer Marked Element
Kickstart Your Career

Get certified by completing the course

Get Started