javascript - Nested Polymer Components Content Issue -
foo.html:
<link rel="import" href="bar.html"> <dom-module id="p-foo"> <template> <p-bar> <content select=".mycontent"></content> </p-bar> </template> <script> polymer( { is: 'p-foo', } ) </script> </dom-module> bar.html:
<dom-module id="p-bar"> <template> bar open <content select=".mycontent"></content> bar closed </template> <script> polymer( { is: 'p-bar', } ) </script> </dom-module> demo.html:
<!doctype html> <html> <head> ... <link rel="import" href="foo.html"> </head> <body> <p-foo><div class="mycontent"><strong>hello</strong></div></p-foo> </body> </html> the expected output:
bar open hello bar closed what get:
bar open bar closed hello the error getting not 100% reproducible. happens percentage of time refresh page. appears more complicated content higher chance of error occurring.
it seems polymer tries select .mycontent before bar component has rendered.
you need register new custom elements call
polymer().also, stated in comments, custom elements need contain hypen. example:
<p-foo>and<p-bar>.
foo.html:
<link rel="import" href="bar.html"> <dom-module id="p-foo"> <template> <p-bar> <content select=".mycontent"></content> </p-bar> </template> <script> polymer( { is: 'p-foo', } ) </script> </dom-module> bar.html:
<dom-module id="p-bar"> <template> bar open <content select=".mycontent"></content> bar closed </template> <script> polymer( { is: 'p-bar', } ) </script> </dom-module> demo.html:
<head> ... <link rel="import" href="foo.html"> </head> <body> <p-foo><div class="mycontent"><strong>hello</strong></div></p-foo> </body> </html> 
Comments
Post a Comment