Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Custom element that performs dynamic HTML Import gets corrupted offesetWidth when used inside <template> #554

Closed
tomalec opened this issue Jun 27, 2014 · 3 comments
Closed

Custom element that performs dynamic HTML Import gets corrupted offesetWidth when used inside <template> #554

tomalec opened this issue Jun 27, 2014 · 3 comments

Comments

@tomalec
Copy link
Contributor

tomalec commented Jun 27, 2014

I'm not sure whether it is a Polymer or Canary bug, or did I used wrong lifecycle callbacks.

I have created two custom elements:

  1. <my-element> that needs to know its width when stamped to DOM (originally it was juicy-tile-list)

    my-element.html

      Polymer('my-element', ( {
      domReady: function (){
          this.width = this.offsetWidth;

  2. <dynamic-import> that adds HTML Import (<link> tag to the head) when attached (originally imported-template), and does not change element's DOM at all.

    dynamic-import.html

    DynamicImportPrototype.attachedCallback = function () {
    // create new link tag
    // ...
    document.head.appendChild(link);
};

Then I simply pack those to <template>:
index.html

...
<template bind>
      <my-element>
          <dynamic-import></dynamic-import>
      </my-element>
  </template>

Full demo is here

What occurred, in Canary (native HTML Imports support?) this.offsetWidth is 0, but for empty <div> with style width: 100%, it should be container - <body> - width.

Under Chrome Stable, and IE it works fine, it also gets corrected after few ms.
Removing wrapping <template> fixes initial width, as well as removing document.head.appendChild line. How and why adding node to the head, affects elements size?
tomalec added a commit to Juicy/imported-template that referenced this issue Jun 27, 2014
@tomalec
Workaround for Polymer/polymer#554, Polyjuice/Launcher#82
f17a8f6
@sorvell
Copy link
Contributor

sorvell commented Jun 27, 2014

This looks like a chrome bug. I've filed this issue to help track the problem:

http://crbug.com/389566

@tomalec
Copy link
Contributor Author

tomalec commented Jun 27, 2014

Thanks :)

@sorvell
Copy link
Contributor

sorvell commented Aug 12, 2014

Closed in favor of the above Chrome bug.

@sorvell sorvell closed this as completed Aug 12, 2014
@tomalec tomalec mentioned this issue Apr 17, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@tomalec @sorvell