Here is a short practice on Polymer:
- Create an HTML file with a script tag that includes the Polymer library.
phpCopy code<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/polymer/3.0.5/polymer-legacy.min.js"></script>
</head>
<body>
</body>
</html>
- Create a custom element to display a message. In this example, we will create a custom element called
my-messagethat displays a message passed as a property.
phpCopy code<!-- my-message.html -->
<dom-module id="my-message">
<template>
<style>
:host {
display: block;
padding: 16px;
background-color: #eee;
border: 1px solid #ddd;
border-radius: 4px;
}
</style>
<div>{{message}}</div>
</template>
<script>
class MyMessage extends Polymer.Element {
static get is() { return 'my-message'; }
static get properties() {
return {
message: {
type: String,
value: 'Hello World!'
}
};
}
}
customElements.define(MyMessage.is, MyMessage);
</script>
</dom-module>
- Use the custom element in your HTML. In this example, we will use the
my-messageelement to display a message.
phpCopy code<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/polymer/3.0.5/polymer-legacy.min.js"></script>
<link rel="import" href="my-message.html">
</head>
<body>
<my-message message="Hello Polymer!"></my-message>
</body>
</html>
This is a simple example of how to create and use a custom element using Polymer. You can find more information about Polymer and its features in the documentation.