前端组件化Polymer入门教程(7)—

DOM元素的创建和管理被称为本地DOM(Local DOM)

本地DOM模板

如果你需要使用本地DOM，你们需要用<dom-module>并指定一个相匹配的ID。

<dom-module id="x-foo"><template>I am x-foo!</template><script>Polymer({is: 'x-foo'});</script></dom-module>

在template里面写的css，html将不会影响外面的代码。有隔离的作用，他们称作Shadow DOM。脚本可以写在<dom-module>里面也可以写在外面。

通过this.$.name快速获取元素

<dom-module id="x-custom"><template>Hello World from <span id="name"></span>!</template><script>Polymer({is: 'x-custom',ready: function() {this.$.name.textContent = this.tagName;}});</script></dom-module>

会获取到id为name的属性，这里是span

另外还可以通过this.$$(selector)来获取元素，$$返回第一个匹配的DOM，使用方法和document.querySelector一样。

通过content标签我们可以在外部插入内容

<x-custom><p>这是文章的内容</p>
</x-custom>
<dom-module id="x-custom"><template><header>这是头部</header><section><header>这是一篇文章的头部</header><content></content></section><footer>这是底部</footer></template><script>Polymer({is: 'x-custom'});</script>
</dom-module>

转载于:https://www.cnblogs.com/pssp/p/5925697.html

前端组件化Polymer入门教程(7)——Local DOM相关推荐

React.js 小书 Lesson1-2 - 前端组件化（一）：从一个简单的例子讲起
React.js 小书 Lesson1-2 - 前端组件化(一):从一个简单的例子讲起本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson2 ...
前端面试题，前端组件化、工程化、模块化的概念
1.前端模块化: 可以理解为一组自定义业务的抽象封装,是根据项目的情况来进行封装组合到一起的,比如我们可以分为登录模块,评论模块.模块可维护性好,组合灵活,方便调用,多人协作互不干扰. 2.前端组件化 ...
要web开发精品教程吗？免费一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放
要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放大师主讲经验难得由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...
如何通过 Vue＋Webpack 来做通用的前端组件化架构设计
目录: 1. 架构选型 2. 架构目录介绍 3. 架构说明 4. 招聘消息目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs.angularjs.emberj ...
组件化开发实战_一篇文章搞懂什么是前端“组件化”开发
学过网页的朋友都知道,制作一个网页离不开HTML.CSS和JavaScript技术.对于初学者来来说,掌握这3门技术就已经很不容易了,为什么前端为什么又要搞出来一个"组件化"开发的 ...
「前端组件化」该怎么理解？
大家好,我是若川.今天分享一篇关于「前端组件化」的好文.欢迎点击下方卡片关注我. 以下是正文~ 这里我们一起来学习前端组件化的知识,而组件化在前端架构里面是最重要的一个部分. 讲到前端架构,其实前端架 ...
前端组件化-抽象公共组件类
优化上次的组件化小demo 上次的组件化demo只是为了简单的实现前端组件化的思想,这次我们稍微优化一下抽离公共类下面代码 html <div id="wrapper"&g ...
前端组件化和模块化最大的区别是什么_7招提升你的前端开发效率
前言前端工程师其实是一个工作很杂的职位,除了要负责切图.写html/css/js外,还要解决一系列的浏览器兼容性.网页性能优化等问题,所以提高前端工程师的开发效率是势在必行的,也是前端工程化的体现. ...
前端组件化思想与实践
前端组件化思想与实践组件化思想什么是组件化? 简单的说组件就是:将一段UI样式和其对应的功能作为独立的整体去看待,无论这个整体放在哪里去使用,它都具有一样的功能和样式,从而实现复用,这种整体化的思 ...

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

本地DOM模板

通过this.$.name快速获取元素

通过content标签我们可以在外部插入内容

前端组件化Polymer入门教程(7)——Local DOM相关推荐

最新文章

热门文章