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

最新推荐文章于 2024-06-05 10:04:38 发布

辛苦的码农20200609

最新推荐文章于 2024-06-05 10:04:38 发布

阅读量275

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h2i1kia110jb.html

版权

前端专栏收录该内容

785 篇文章 4 订阅

订阅专栏

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>