[Tag] web component #tags #component

tag.html

(function(){
                const template = document.createElement('template');
                template.innerHTML = `
                    <style>
                        ::slotted(*), ::slotted(*:before), ::slotted(*:after) {
                            box-sizing: border-box;
                        }

                        .tags-container {
                            display: -webkit-flex;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-flex-flow: row wrap;
                                -ms-flex-flow: row wrap;
                                    flex-flow: row wrap;
                            margin-bottom: 15px;
                            width: 100%;
                            min-height: 34px;
                            padding: 2px 5px;
                            font-size: 14px;
                            line-height: 1.6;
                            background-color: transparent;
                            border: 1px solid #ccc;
                            border-radius: 1px;
                            overflow: hidden;
                            word-wrap: break-word;
                            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
                        }

                        ::slotted(input.tag-input) {
                            -webkit-flex: 3;
                                -ms-flex: 3;
                                    flex: 3;
                            border: 0;
                            outline: 0;
                        }

                        ::slotted(.tag) {
                            position: relative;
                            margin: 2px 6px 2px 0;
                            padding: 1px 20px 1px 8px;
                            font-size: inherit;
                            font-weight: 400;
                            text-align: center;
                            color: #fff;
                            background-color: #317CAF;
                            border-radius: 3px;
                            transition: background-color .3s ease;
                            cursor: default;
                        }

                        ::slotted(.tag:first-child) {
                            margin-left: 0;
                        }

                        ::slotted(.tag--marked) {
                            background-color: #6fadd7;
                        }

                        ::slotted(.tag--exists) {
                            background-color: #EDB5A1;
                            -webkit-animation: shake 1s linear;
                                    animation: shake 1s linear;
                        }

                        ::slotted(.tag__name) {
                            margin-right: 3px;
                        }

                        ::slotted(.tag__remove) {
                            position: absolute;
                            right: 0;
                            bottom: 0;
                            width: 20px;
                            height: 100%;
                            padding: 0 5px;
                            font-size: 16px;
                            font-weight: 400;
                            transition: opacity .3s ease;
                            opacity: .5;
                            cursor: pointer;
                            border: 0;
                            background-color: transparent;
                            color: #fff;
                            line-height: 1;
                        }

                        ::slotted(.tag__remove:hover) {
                            opacity: 1;
                        }

                        ::slotted(@-webkit-keyframes shake) {
                            0%, 100% {
                                -webkit-transform: translate3d(0, 0, 0);
                                        transform: translate3d(0, 0, 0);
                            }
                            10%, 30%, 50%, 70%, 90% {
                                -webkit-transform: translate3d(-5px, 0, 0);
                                        transform: translate3d(-5px, 0, 0);
                            }
                            20%, 40%, 60%, 80% {
                                -webkit-transform: translate3d(5px, 0, 0);
                                        transform: translate3d(5px, 0, 0);
                            }
                        }

                        ::slotted(@keyframes shake) {
                            0%, 100% {
                                -webkit-transform: translate3d(0, 0, 0);
                                        transform: translate3d(0, 0, 0);
                            }
                            10%, 30%, 50%, 70%, 90% {
                                -webkit-transform: translate3d(-5px, 0, 0);
                                        transform: translate3d(-5px, 0, 0);
                            }
                            20%, 40%, 60%, 80% {
                                -webkit-transform: translate3d(5px, 0, 0);
                                        transform: translate3d(5px, 0, 0);
                            }
                        }
                    </style>
                    <form action="" class="test" method="post">
                        <label for="exist-values">Exist values
                            <div class="tags-container"><slot></slot></div>
                        </label>
                        <button type="submit" name="button">Send</button>
                    </form>
                `;

                class ITag extends HTMLElement {
                    static get observedAttributes() {
                    return [];
                    }

                    constructor() {
                        super();
                        this.attachShadow({mode: 'open'});
                        this.shadowRoot.appendChild(template.content.cloneNode(true));
                    }
                }
                window.customElements.define('i-tag', ITag);
            })();