Creating a Web Component with Polymer

01-skeleton.html

<link rel="import" href="../polymer/polymer.html">
<!--
`my-listfilter`
A filterable list component

@demo demo/index.html 
-->
<dom-module id="my-listfilter">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>
        <h2>Hello [[prop1]]</h2>
    </template>
    <script>
        Polymer({
            is: 'my-listfilter',
            properties: {
                prop1: {
                    type: String,
                    value: 'my-listfilter',
                },
            },
        });
    </script>
</dom-module>

02-input.html

<link rel="import" href="../polymer/polymer.html">
<!--
`my-listfilter`
A filterable list component

@demo demo/index.html
-->
<dom-module id="my-listfilter">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>
        <input value="{{prop1::input}}" />
        <h2>Hello [[prop1]]</h2>
    </template>
    <script>
        Polymer({
            is: 'my-listfilter',
            properties: {
                prop1: {
                    type: String,
                    value: 'my-listfilter',
                },
            },
        });
    </script>
</dom-module>

03-list.html

<link rel="import" href="../polymer/polymer.html">
<!--
`my-listfilter`
A filterable list component

@demo demo/index.html
-->
<dom-module id="my-listfilter">
    <template>
        <style>
            :host {
                display: block;
            }
            .hidden {
                display: none;
            }
        </style>
        <input value="{{prop1::input}}" />
        <h2>Hello [[prop1]]</h2>
        <ul id="list">
            <li>Hypertext Markup Language</li>
            <li>Cascading Style Sheets</li>
            <li>Javascript</li>
            <li>Web Components</li>
            <li>Polymer</li>
            <li>Web Browser</li>
            <li>Mentally Friendly</li>
        </ul>
    </template>
    <script>
        Polymer({
            is: 'my-listfilter',
            properties: {
                prop1: {
                    type: String,
                    value: 'my-listfilter',
                },
            },
        });
    </script>
</dom-module>

04-function.html

<link rel="import" href="../polymer/polymer.html">
<!--
`my-listfilter`
A filterable list component

@demo demo/index.html
-->
<dom-module id="my-listfilter">
    <template>
        <style>
            :host {
                display: block;
            }
            .hidden {
                display: none;
            }
        </style>
        <input value="{{prop1::input}}" />
        <h2>Hello [[prop1]]</h2>
        <ul id="list">
            <li>Hypertext Markup Language</li>
            <li>Cascading Style Sheets</li>
            <li>Javascript</li>
            <li>Web Components</li>
            <li>Polymer</li>
            <li>Web Browser</li>
            <li>Mentally Friendly</li>
        </ul>
    </template>
    <script>
        Polymer({
            is: 'my-listfilter',
            properties: {
                prop1: {
                    type: String,
                    value: 'my-listfilter',
                },
            },
            filterList: function() {
                var items = this.$.list.children;

                for (var i = 0; i < items.length; i++) {
                    var item = Polymer.dom(items[i]);

                    if (item.textContent.includes(this.prop1)) {
                        item.classList.remove('hidden');
                    } else {
                        item.classList.add('hidden');
                    }
                }
            }
        });
    </script>
</dom-module>

05-observer.html

<link rel="import" href="../polymer/polymer.html">
<!--
`my-listfilter`
A filterable list component

@demo demo/index.html
-->
<dom-module id="my-listfilter">
    <template>
        <style>
            :host {
                display: block;
            }
            .hidden {
                display: none;
            }
        </style>
        <input value="{{prop1::input}}" />
        <h2>Hello [[prop1]]</h2>
        <ul id="list">
            <li>Hypertext Markup Language</li>
            <li>Cascading Style Sheets</li>
            <li>Javascript</li>
            <li>Web Components</li>
            <li>Polymer</li>
            <li>Web Browser</li>
            <li>Mentally Friendly</li>
        </ul>
    </template>
    <script>
        Polymer({
            is: 'my-listfilter',
            properties: {
                prop1: {
                    type: String,
                    value: '',
                    observer: 'filterList'
                },
            },
            filterList: function() {
                var items = this.$.list.children;

                for (var i = 0; i < items.length; i++) {
                    var item = Polymer.dom(items[i]);

                    if (item.textContent.includes(this.prop1)) {
                        item.classList.remove('hidden');
                    } else {
                        item.classList.add('hidden');
                    }
                }
            }
        });
    </script>
</dom-module>