CODEWITHSUNDEEP
polymerweb-componentshadow-dom
ben charman
ben charman

Reputation: 41

polymer web component #shadow root not displaying

I am trying to run a simple polymer web component on a localhost server on my mac.

I think I have followed the tutorial correctly but the #shadow root information is not appearing within the element tag (as you can see in the image) .

The imports are working because polymer.html is being imported in. I can't figure out why the information is not being displayed with the element I have set up. When I run it in safari the H1 appears briefly (for less than a second) then disappears so this tells me polymer is set up properly it just isn't being pulled into the #shadow root of for some reason...

I have been fighting with this for a couple of days.

any help you can give would ber great and save me many more headaches :)

Cheers guys!!

THIS IS THE OUTPUT ON THE LOCAL HOST SERVER...


<html><head><style>body {transition: opacity ease-in 0.2s; } 
body[unresolved] {opacity: 0; display: block; overflow: hidden; position: relative; } 
</style>
    <!-- 1. Load platform support before any code that touches the DOM. -->
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <!-- 2. Load the component using an HTML Import -->
    <link rel="import" href="bower_components/polymer/polymer.html">

  </head>
  <body>
   
   <polymer-element name="bens-element" noscript="">
       
       <template>
           
           <h1>This is the shadow dom</h1>
       </template>
   </polymer-element>
    <!-- 3. Declare the element by its tag. -->
    <bens-element></bens-element>
  
</body></html>

<!DOCTYPE html>
<html>
  <head>
    <!-- 1. Load platform support before any code that touches the DOM. -->
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <!-- 2. Load the component using an HTML Import -->
    <link rel="import"href="bower_components/polymer/polymer.html">

  </head>
  <body>
   
   <polymer-element name="bens-element" noscript>
       
       <template>
           
           <h1>This is the shadow dom</h1>
       </template>
   </polymer-element>
    <!-- 3. Declare the element by its tag. -->
    <bens-element></bens-element>
  </body>
</html>

Upvotes: 1

Views: 1921

Answers (1)

alphadog
alphadog

Reputation: 11209

Safari has no native support for shadow dom yet. It is able to run your polymer application using polyfills. The web component standard is not yet supported on most browsers. Run the application on Google Chrome. You'll see the #shadow root.

Check this page for information for browser compatibility

unresolved attribute is used to mark that the page is not yet initialised.

Edit:

These are causing you problem -

You're using tagged version of dependencies

I tried building using the versions of dependencies that you're using. Same result. I checked and are just tagged releases. Polymer is still in beta and undergoing heavy development. The latest release from the repo that you should be using are - polymer 0.9.0 and webcomponentsjs 0.6.1

It is the polymer dependency that's causing the behaviour in your case. Because I use webcomponentsjs 0.7.0 for all development. Use bower to resolve your dependencies. Will be simpler if you remove the bower_components folder an bower.json and reinstall the dependencies

The body tag should contain the unresolved attribute.

This is done to prevent unresolved data-bindings and rules from being displayed in the browser. Because custom elements of polymer take time to initialise. Otherwise you’ll see a lot of double moustache symbols - {{}} in page for data bindings and also missing style rules or an empty page.

WebComponents.js adds a style rule for selector body[unresolved] to the page when it is initialised. It sets the opacity to 0 - invisible. So no contents are displayed yet.

After Polymer has successfully initialised all custom-elements, the templates and data bindings resolved, it removes the unresolved attribute. The page fades into view over 200ms because of another body style rule added on webcoponents initialisation.

Check the head tag for these two style rules added when the page has initialised.

Upvotes: 1

Related Questions