在自定义元素中使用Polymer shadow dom的麻烦

时间:2016-08-25 10:27:07

标签: javascript polymer polymer-1.0

我正在尝试创建一个定制的聚合物元素。它需要在div容器中添加新标签。

以下是一个例子:

CREATE TABLE `wp_bkkf_postmeta` (                                                               
`meta_id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,                                          
`post_id` bigint(20) unsigned NOT NULL DEFAULT '0',                                             
`meta_key` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,                                
`meta_value` longtext COLLATE utf8mb4_unicode_ci,                                               
PRIMARY KEY (`meta_id`),                                                                        
KEY `post_id` (`post_id`),                                                                      
KEY `meta_key` (`meta_key`(191))                                                                
) ENGINE=MyISAM AUTO_INCREMENT=30883570 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci      

CREATE TABLE `wp_bkkf_posts` (                                                                  
`ID` bigint(20) unsigned NOT NULL AUTO_INCREMENT,                                               
`post_author` bigint(20) unsigned NOT NULL DEFAULT '0',                                         
`post_date` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',                                    
`post_date_gmt` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',                                
`post_content` longtext COLLATE utf8mb4_unicode_ci NOT NULL,                                    
`post_title` text COLLATE utf8mb4_unicode_ci NOT NULL,                                          
`post_excerpt` text COLLATE utf8mb4_unicode_ci NOT NULL,                                        
`post_status` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'publish',                
`comment_status` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'open',                
`ping_status` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'open',                   
`post_password` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '',                     
`post_name` varchar(200) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '',                        
`to_ping` text COLLATE utf8mb4_unicode_ci NOT NULL,                                             
`pinged` text COLLATE utf8mb4_unicode_ci NOT NULL,                                              
`post_modified` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',                                
`post_modified_gmt` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',                            
`post_content_filtered` longtext COLLATE utf8mb4_unicode_ci NOT NULL,                           
`post_parent` bigint(20) unsigned NOT NULL DEFAULT '0',                                         
`guid` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '',                             
`menu_order` int(11) NOT NULL DEFAULT '0',                                                      
`post_type` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT 'post',                     
`post_mime_type` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '',                   
`comment_count` bigint(20) NOT NULL DEFAULT '0',                                                
PRIMARY KEY (`ID`),                                                                             
KEY `post_name` (`post_name`(191)),                                                             
KEY `type_status_date` (`post_type`,`post_status`,`post_date`,`ID`),                            
KEY `post_parent` (`post_parent`),                                                              
KEY `post_author` (`post_author`),                                                              
KEY `post_idx` (`post_type`,`post_status`)                                                      
) ENGINE=MyISAM AUTO_INCREMENT=1556181 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci     

如果我将此元素添加到我的布局两次并在第二个元素上调用<dom-module id="my-element"> <template> <div id="container"></div> </template> <script> Polymer({ is: 'my-element', someHandler: function() { var el = document.createElement('span'); this.$.container.appendChild(el); } }); </script> </dom-module> ,它会将span添加到第一个元素。怎么了?如何解决?

1 个答案:

答案 0 :(得分:0)

要使用JavaScript操作节点,您必须使用Polymer的API。这是documentation page所说的内容:

  

注意:所有DOM操作都必须使用此API,而不是直接在节点上使用DOM API。

在您的代码中,要添加子节点,您应该写:

Polymer.dom(this.$.container).appendChild(el);

我认为这也是出于性能原因,但正如您所看到的,它似乎也与Polymer以某种方式管理其节点有关。