Using jQuery using Web components – jQuery Web components

in this post we will show you jQuery Web components, The first sentence on the compound Project page says that net components start a replacement era of net development supported encapsulated and practical custom components that stretch hypertext markup language itself. I couldn’t agree additional – however before this new era starts, we must always still be ready to use the nice previous tools from the past. each net developer has many jQuery plugins at his disposal, however there area unit a couple of key gotchas once operating with jQuery at intervals a compound component that require to be self-addressed.

Baasic and compound living in (almost) good harmony – jQuery Web components

jQuery Web components, Working on set of net elements for Baasic, I begun to look for a straightforward applications programme hypertext markup language editor, and there area unit lots of nice jQuery plugins which will be used right off the hold in customary net comes. however things got sophisticated extremely quick after we tried to use any of those in our net elements. It seems that after you place such “ordinary” plugin within net component’s Shadow DOM, it usually can not be employed by jQuery. For those of you World Health Organization still didn’t bump into the ideas of Shadow DOM and lightweight DOM, there’s a pleasant introduction here.

A naive approach – jQuery Web components

jQuery Web components, Many plugins assume that every one of their content is offered within the light-weight DOM, which leads USA to all or any styles of issues. I got all styles of javascript errors and glitches, however none of the offered plugins was operating because it ought to. My initial approach to resolve this case was to line up a jQuery plugin within light-weight DOM and pass it into the online element as content, as recommended during this post. In our explicit case, most of the hypertext markup language editors treat a textarea component that should be gift within the light-weight DOM. So, here is my initial try, mistreatment the wildly widespread CKEditor:

<!-- set polymer html -->
<link rel="import" href="../polymer/polymer.html">
<!-- set ckeditor script -->
<script type="text/javascript">
    CKEDITOR_BASEPATH = '/bower_components/ckeditor/';
</script>
<!-- set ckeditor js -->
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<!-- set jquery js -->
<script type="text/javascript" src="../ckeditor/adapters/jquery.js"></script>
<!-- set polymer -->
<polymer-element name="baasic-htmleditor" attributes="value">
	<!-- set template -->
    <template>
        <style>
            :host {
                display: block;
            }
        </style>
        <content id="contentEditor"></content>
    </template>
	<!-- set script -->
    <script>
	    // jQuery Web components
        Polymer('baasic-htmleditor', {
            getData: function () {
                return CKEDITOR.instances.editor1.getData();
            },
            setData: function(value)
            {
                this.value = value;
                CKEDITOR.instances.editor1.setData(this.value);
            },
            domReady: function () {
                $(this.$.contentEditor.getDistributedNodes()[0]).ckeditor();
                CKEDITOR.instances.editor1.setData(this.value);
            }
        });
    </script>
</polymer-element>

The part itself is employed like this for jQuery Web components

<baasic-htmleditor id="htmlEditor" value=""><textarea></textarea></baasic-htmleditor>

The Light DOM part will be capabled true|gone through|had|undergone|saw|felt|responded to|suffered} many levels of hierarchy (nested jQuery Web components) by victimization an empty content tag for jQuery Web components

<baasic-htmleditor id="htmlEditor" value=""><content></content></baasic-htmleditor>

It works allright, however lights up a “code smell” indicator quickly. In my opinion, this approach defeats the full purpose of internet elements, that ought to be standard and self-contained parts, while not the necessity for such tricks. Therefore, an alternate approach is required to permit existing jQuery plugins to exist with internet elements.

A naive approach, take two for jQuery Web components

Here is another variant of this approach, victimization another editor – editor in chief. This time, we tend to area unit dynamically generating a textarea part within the sunshine DOM, rather than passing it through from the page holding the part.

<!-- set polymer html -->
<link rel="import" href="../polymer/polymer.html">
<!-- set redactor css -->
<link rel="stylesheet" href="../redactor/redactor/redactor.css">
<!-- set polymer element -->
<polymer-element name="test-editor" attributes="value">
	<!-- set template -->
    <template>
		<!-- set style -->
		<style>
				:host {
					display: block;
				}
		</style>
		<!-- set redactor css -->
		<link rel="stylesheet" href="../redactor/redactor/redactor.css">
		<!-- set content -->
		<content id="contentEditor"></content>
    </template>
	<!-- set redactor js -->
    <script type="text/javascript" src="../redactor/redactor/redactor.js"></script>
    <script>
		// jQuery Web components
        Polymer('test-editor', {
            domReady: function () {
                var textarea_el = document.createElement("textarea");
                textarea_el.id = "content";
                this.shadowRoot.host.appendChild(textarea_el);
                // to let is see what happened in Light DOM
                var lightDom = $(this.$.contentEditor.getDistributedNodes());
                // to make editor magic happen
                $(textarea_el).redactor();
            }
        });
    </script>
</polymer-element>

This approach still does not solve the problem of nesting jQuery Web components – we did succeed in moving the textarea up into Light DOM, however it will still be encapsulated into the master control’s Shadow DOM.

Here is another and much cleaner attempt to make it work for jQuery Web components.

<!-- set polymer html -->
<link rel="import" href="../polymer/polymer.html">
<!-- set redactor css -->
<link rel="stylesheet" href="../redactor/redactor/redactor.css">
<!-- set polymer element -->
<polymer-element name="test-editor" attributes="value">
	<!-- set template -->
    <template>
        <style>
            :host {
                display: block;
            }
        </style>
		<!-- set redactor css -->
        <link rel="stylesheet" href="../redactor/redactor/redactor.css">
        <content></content>
        <textarea id="editor"></textarea>

    </template>
	<!-- set redactor js -->
    <script type="text/javascript" src="../redactor/redactor/redactor.js"></script>
    <script>
		// jQuery Web components
        Polymer('test-editor', {
            domReady: function () {
                $(this.$.editor).redactor();
            }
        });

    </script>
</polymer-element>

This is straightforward enough and nearly works, when we tend to mounted CSS to a small degree (removing body selectors and similar stuff). However, dropdown menus don’t seem to be positioned properly, and markup language links don’t seem to be inserted wherever they ought to be, as a number of the practicality still clearly depends aboard textarea being placed within the lightweight DOM.

Alternative solutions that try and wrap CKeditor or similar controls do things to a small degree otherwise, however still while not an excessive amount of success. as an example, this wrapper which will be found at part room works, however solely in browsers that presently don’t support internet elements natively – therefore Chrome and Opera ar out.

The morale of the story for jQuery Web components

You should not take the abundance of jQuery plugins with no consideration if you wish to use them with Polymer; likelihood is that a lot of of them won’t work, as most plugins assume all of their content is offered in lightweight DOM. we’ve managed to integrate a number of them into our compound components while not changes; one or two of plugins needed minor tweaks, however the foremost advanced ones can would like a complete rewrite to create them prepared for internet elements. we tend to ar still searching for the correct markup language editor that may be compatible with compound. within the meanwhile, there ar one or two of “native” markdown editor elements like this one that behave quite nicely.

Any thoughts on comments on a way to use different jQuery plugins with Polymer? We’d like to hear them!