除了上一篇说到的创建自定义元素方法以外，还可以通过原生JS来创建，当你需要动态的创建元素时可以通过这种方式。

template.html

<link rel="import" href="../polymer-1.7.0/polymer.html">

<script>

	MyElement = Polymer({

      is: 'my-element',

      created: function() {

        this.textContent = 'My element!';

      }

    });

    var el1 = document.createElement('my-element');

    var el2 = new MyElement();

    document.getElementById('box').appendChild(el2);

</script>

index.html

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<!-- 这是一个基础版的兼容库 -->

	<script src="webcomponents-lite.min.js"></script>

	<!-- 将rel修改为import可以引入另外一个HTML，它将会被执行 -->

    <link rel="import" href="./template/template.html">

</head>

<body>

	<div id="box"></div>

</body>

</html>



created: function() {

``this.textContent = 'My element!';

}

当创建这个元素的时候，created会被执行，关于更多这方面的信息我们会在生命周期篇详细说明。

var el1 = document.createElement('my-element');

var el2 = new MyElement();

var el3 = new MyElement();

document.getElementById('box').appendChild(el2);

document.getElementById('box').appendChild(el3);

用new创建MyElement实例,createElement只是创建并不会被添加

如果在实例化的时候你想传递参数可以通过添加一个factoryImpl方法。
<script>

	MyElement = Polymer({

      is: 'my-element',

      factoryImpl: function(foo, bar) {

      	this.textContent = 'Hello num is ' + foo + ' you ' +  bar;

      }

    });

	var e = document.createElement('my-element');

    var el = new MyElement(42, 'octopus');

    document.getElementById('box').appendChild(el);

</script>

当MyElement被实例化的时候factoryImpl会接受这些参数，并且执行。另外如果你想自定义方法，可以这样。

<script>

	MyElement = Polymer({

      is: 'my-element',

      factoryImpl: function(foo, bar) {

      	this.textContent = 'Hello num is ' + foo + ' you ' +  bar;

      	foo===42&&this.msg();

      },

      msg:function(){

      	alert('你好！');

      }

    });

	var e = document.createElement('my-element');

    var el = new MyElement(42, 'octopus');

    document.getElementById('box').appendChild(el);

</script>

默认情况下msg是不会执行的，需要我们手动调用。

扩展原生HTML元素

template.html

<script>

	Polymer({

      is: 'my-input',

      extends: 'input',

      created: function() {

        this.style.border = '1px solid red';

      }

    });

</script>

extends需要扩展的元素，created被创建的时候，通过js的createElement创建或者HTML添加都会执行这个方法。

index.html

<input is="my-input">

<input type="text">

在需要被扩展的元素上添加一个is属性。

以上是直接通过HTML的方式添加的，如果需要通过js来操作可以通过下面的方法。

template.html

<script>

	MyInput = Polymer({

      is: 'my-input',

      extends: 'input',

      created: function() {

        this.style.border = '1px solid red';

      }

    });

	var el1 = document.createElement('input','my-input');

	document.body.appendChild(el1);

</script>

注意：目前只支持扩展input或button，其他元素或许以后会支持。

如果你想在页面加载完毕以后再执行可以这样写。

template.html

<link rel="import" href="../polymer-1.7.0/polymer.html">

<dom-module id="main-document-element">

  <template>

    <p>

      Hi! I'm a Polymer element that was defined in the

      main document!

    </p>

  </template>

</dom-module>

index.html



<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<!-- 这是一个基础版的兼容库 -->

	<script src="webcomponents-lite.min.js"></script>

	<!-- 将rel修改为import可以引入另外一个HTML，它将会被执行 -->

    <link rel="import" href="./template/template.html">

</head>

<body>

	<main-document-element></main-document-element>

	<script>

	    HTMLImports.whenReady(function () {

	      console.log(1);

	      Polymer({

	        is: 'main-document-element'

	      });

	    });

	    console.log(0);

  </script>

</body>

</html>

当文档中的所有输入都已完成加载时才会调用HTMLImports.whenReady函数。

整篇文章下来，发现创建元素时没有用new有时也可以，目前这个问题还得研究一下，后面再更新。

恭喜你看完了。

前端组件化Polymer入门教程(4)——自定义元素的更多相关文章

  1. 前端组件化Polymer入门教程(1)——初识&&安装

    前端组件化Polymer入门教程目录: 前端组件化Polymer入门教程(1)--初识&&安装 前端组件化Polymer入门教程(2)--快速入门 前端组件化Polymer入门教程(3 ...

  2. 前端组件化Polymer入门教程(3)——快速入门

    本系列主要翻译官方的教程,因为国内目前这方面的资料太少了,但也不一定和官网的一样,反正就是自己想到哪就写到哪. 如果我没有说明,默认情况下index.html始终包含这段代码,后面将不会再贴上来. & ...

  3. 前端组件化Polymer入门教程(5)——生命周期

    以前我对生命周期这个概念还真不是很清楚,不过想想也简单,比如说人的生命周期,无非就是生老病死.而对于程序的生命周期就是说,它在每个阶段都会做不同的事,再比如说回调函数把,ajax返回的时候它才执行,那 ...

  4. 前端组件化Polymer入门教程(2)——Hello world

    本节为体验篇,就是让你了解它有哪些功能,不做详细说明,后面再来讲细节. 自定义元素 组件页 <link rel="import" href="../polymer- ...

  5. 前端组件化Polymer入门教程(8)——事件

    可以在listeners对象中监听事件 <x-custom></x-custom> <dom-module id="x-custom"> < ...

  6. 前端组件化Polymer入门教程(7)——Local DOM

    DOM元素的创建和管理被称为本地DOM(Local DOM) 本地DOM模板 如果你需要使用本地DOM,你们需要用<dom-module>并指定一个相匹配的ID. <dom-modu ...

  7. 前端组件化Polymer入门教程(6)——监听属性值变化

    监听属性值变化 如果需要监听属性值变化可以通过给observer赋值一个回调函数. <say-Hello></say-Hello> <dom-module id=&quo ...

  8. 前端组件化Polymer深入篇(1)

    在前面的几节里面简单的介绍了一下Polymer的基本功能,但还有一些细节的东西并没有讨论,所有打算花点时间把Polymer的一些细节写一下. new和createElement有区别吗? <sc ...

  9. Vue.js：轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

随机推荐

  1. JVM、JRE，JDK

    JVM解释class     Java虚拟机,解释编译后的class文件给系统..java代码编译成 .class机器指令,就能在JVM运行了,直接到硬件执行,实现了跨平台,只要操作系统安装了JVM, ...

  2. pyppeteer使用笔记

    pyppeteer -- python版本的puppeteer,一个强大的chronium headless浏览器API 最近搞天猫用了一波儿,记录一下. 先上文档: https://miyakogi ...

  3. （ 递归 ）Fractal -- POJ -- 2083

    http://poj.org/problem?id=2083 Fractal Time Limit: 1000MS   Memory Limit: 30000K Total Submissions:  ...

  4. TCP、UDP网络通信

    IP地址和端口号 端口号是用两个字节(16位的二进制数)表示的,它的取值范围是0~65535,其中,0~1023之间的端口号用于一些知名的网络服务和应用, 用户的普通应用程序需要使用1024以上的端口 ...

  5. 区间DP POJ1160村庄邮局问题

    POJ1160 题目大意:一系列村庄在一维坐标系上有序的排列,建设p个邮局,问各个村庄到邮局的最短距离和. 线性区间DP问题 dp数组的值为最短/最优距离 村庄和邮局为限制 dp[i][j]表示前i个 ...

  6. XE7 & FMX 那些年我们一起上过的控件：ListView 之 (3) 加载数据时如何显示自定义样式

    本文介绍一下ListView下如何加载数据.及使用进度条反馈当前进度给用户. 注意: 原创作品,请尊重作者劳动成果,转载请注明出处!!!原文永久固定地址:http://www.cnblogs.com/ ...

  7. “全栈2019”Java多线程第三十四章：超时自动唤醒被等待的线程

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  8. 简单题（K-D Tree）

    简单题不简单-- 我们把单点加操作改成插入一个权值为增加量的点,将问题转化成询问一个矩阵中所有点的和,用 \(K-D\ Tree\) 维护,时间复杂度 \(O(n\sqrt{n})\) \(Code\ ...

  9. shapefile的使用和地理信息的获得

    Shapefile文件是美国ESRI公司发布的文件格式,因其ArcGIS软件的推广而得到了普遍的使用,是现在GIS领域使用最为广泛的矢量数据格式.官方称Shapefile是一种用于存储地理要素的几何位 ...

  10. Redis---List(链表)

    1. 基本结构 Redis 早期版本存储 list 列表数据结构使用的是压缩列表 ziplist 和普通的双向链表 linkedlist,也就是元素少时用 ziplist,元素多时用 linkedli ...