【shadowdom入UI】webcomponents思想如何应用于实际项目

① ui.js
② ui.html
③ ui.css

$('沙箱中的一个元素') => []

1 <div id="ui-view-16" style="">
2   <div class="cm-num-adjust">
3     <div class="cm-num-adjust">
4       <span class="cm-adjust-minus js_num_minus disabled ">span><span class="cm-adjust-view js_cur_num "
5         contenteditable="true">1个span> <span class="cm-adjust-plus js_num_plus ">span>
6     div>
7   div>
8 div>

 1 
 2 <div id="wrapper" >
 3   
 4   <style>
 5   #wrapper { ......}
 6   style>
 7 
 8   
 9   <div>div>
10 <div>

1 <div id="wrapper">
2   #shadow-root
3   <style>style>
4   <div>
5   div>
6 <div>

 1 //与模板对应的css文件，默认不存在，需要各个组件复写
 2   this.uiStyle = null;
 3 
 4   //保存样式格式化结束的字符串
 5   //      this.formateStyle = null;
 6 
 7   //保存shadow dom的引用，用于事件代理
 8   this.shadowDom = null;
 9   this.shadowStyle = null;
10   this.shadowRoot = null;
11 
12   //框架统一开关，是否开启shadow dom
13   this.openShadowDom = true;
14 
15 //      this.openShadowDom = false;
16 
17   //不支持创建接口便关闭，也许有其它因素导致，这个后期已接口放出
18   if (!this.wrapper[0].createShadowRoot) {
19     this.openShadowDom = false;
20   }

 1 createRoot: function (html) {
 2 
 3   this.$el = $('
');
 4   var style = this.getInlineStyle();
 5 
 6   //如果存在shadow dom接口，并且框架开启了shadow dom
 7   if (this.openShadowDom) {
 8     //在框架创建的子元素层面创建沙箱
 9     this.shadowRoot = $(this.$el[0].createShadowRoot());
10 
11     this.shadowDom = $('
' + html + '
');
12     this.shadowStyle = $(style);
13 
14     //开启shadow dom情况下，组件需要被包裹起来
15     this.shadowRoot.append(this.shadowStyle);
16     this.shadowRoot.append(this.shadowDom);
17 
18   } else {
19 
20     this.$el.html(style + html);
21   }
22 },