index.htm

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-lite.js"></script>
    <script type="text/javascript" src="source/smart.element.js"></script>
	<script>
		Smart('smart-test', class TestElement extends Smart.BaseElement {
			// properties.
			static get properties() {
				return {
					'content': {
						type: 'string'
					}
				};
			}

		    static get listeners() {
				return {
					'click': '_clickHandler'
				};
			}

    
			/** Changes the check state wneh widget container is clicked. */
			_clickHandler(event) {
				const that = this;
				
				this.content = "Thanks for clicking me!";
			}
	
			/** Element's template. */
			template() {
				return '<div inner-h-t-m-l=\'[[content]]\'></div>';
			}

			/** Called when the element is ready. Used for one-time configuration of the Checkbox. */
    		ready() {
				super.ready();
			}

			propertyChangedHandler(propertyName, oldValue, newValue) {
				super.propertyChangedHandler(propertyName, oldValue, newValue);        
			}
		});
	</script>
	<style>
		.smart-container {
			box-sizing: border-box;
			font-family: inherit;
			font-size: inherit;
			display: block;
			width: 100%;
			height: 100%;
			outline: none;
			margin: 0;
			padding: 0;
		}

		.smart-container * {
			box-sizing: border-box;
		}	
		smart-test {
			background: #6200EE;
			color: #fff;
			display: inline-block;
			border-radius: 5px;
			border: 1px solid #6200EE;
			text-align: center;
			cursor: pointer;
			padding: 5px 10px;
			transition: all 0.3s;
		}
		smart-test:hover {
			background: #FF0095;
			border-color: #FF0095;
		}
	</style>
</head>
<body>
    <smart-test content="Hello! I am Smart Element. You can click me."></smart-test>
</body>
</html>