restrict paper-dialog to a specific element instead of window
<p>I do have a <code>pl-loader</code> element:
    
    
    
    
    
    
    
    
    </p>

<pre><code>&lt;dom-module id="pl-loader"&gt;
    &lt;style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"&gt;
        :host{
            @apply(--layout-horizontal);
            @apply(--layout-center-justified);
        }
        :host paper-dialog{
            @apply(--layout-vertical);
            @apply(--layout-center-justified);
            background-color:transparent;
            width:100px;
            height:100px;
            box-shadow:none;
            padding:none;
        }
        :host paper-dialog paper-spinner-lite{
            --paper-spinner-stroke-width: 6px;
            --paper-spinner-color: var(--primary-color);
            width:100%;
            height:100%;
            padding-left:0px;
            padding-right:0px;
        }
  &lt;/style&gt;
  &lt;template&gt;
        &lt;content&gt;
            &lt;paper-dialog id="plLoaderDialog" fit-into="" auto-fit-on-attach="true" entry-animation="fade-in-animation"
              exit-animation="fade-out-animation" modal&gt;
                &lt;paper-spinner-lite active&gt;&lt;/paper-spinner-lite&gt;
            &lt;/paper-dialog&gt;
        &lt;/content&gt;
    &lt;/template&gt;
  &lt;script&gt;
        HTMLImports.whenReady(function(){
        Polymer({
            is: "pl-loader",
                properties: {
                    status: {
                        type: Boolean,
                        notify: true,
                        reflectToAttribute: true
                    }
                },

            ready: function(){
                    this.$.plLoaderDialog.fitInto = this;
                    this.open();
                },

                status: function(e){
                    if(this.hasAttribute('hidden')){ return true } return false;
                },

                open: function(e){
                    var dialog = this.$.plLoaderDialog;
                    dialog.open();
                    this.removeAttribute('hidden');
                },

                close: function(e){
                    var dialog = this.$.plLoaderDialog;
                    dialog.close();
                    this.setAttribute('hidden', true);
                }
        });
    });
  &lt;/script&gt;
&lt;/dom-module&gt;
</code></pre>

<p>I have imported and used <code>paper-dialog</code>, how can i restrict its backdrop to this element only? or to a specific element on a page instead of the whole window?</p>

<p>I've tried <code>this.$.plLoaderDialog.fitInto = this;</code> but nothing works..</p>

<p>Its effect can be seen <a href="https://platinumindustriespl.com/" rel="nofollow">here</a>. I dont want the blue paper-header to be covered by the backdrop.</p>

<p>Further more, <code>this.$.plLoaderDialog.setAttribute(fit-into, this)</code> somehow works how i want but brings up an error <code>iron-fit-behavior.html:89 Uncaught TypeError: this.fitInto.getBoundingClientRect is not a function</code> which breaks my element's layout.</p>