Javascript 将“图纸”对话框限制为特定元素，而不是窗口

我确实有一个

pl加载程序
元素：

<dom-module id="pl-loader">
    <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
        :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;
        }
  </style>
  <template>
        <content>
            <paper-dialog id="plLoaderDialog" fit-into="" auto-fit-on-attach="true" entry-animation="fade-in-animation"
              exit-animation="fade-out-animation" modal>
                <paper-spinner-lite active></paper-spinner-lite>
            </paper-dialog>
        </content>
    </template>
  <script>
        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);
                }
        });
    });
  </script>
</dom-module>


：主持人{
@应用（--水平布局）；
@应用（--布局中心对齐）；
}
：主机纸张对话框{
@应用（--垂直布局）；
@应用（--布局中心对齐）；
背景色：透明；
宽度：100px；
高度：100px；
盒影：无；
填充：无；
}
：主机纸张对话框纸张微调器lite{
--纸张旋转器笔划宽度：6px；
--纸张微调器颜色：var（--原色）；
宽度：100%；
身高：100%；
左侧填充：0px；
右边填充：0px；
}
HTMLImports.whenReady（函数（）{
聚合物({
是：“pl加载器”，
特性：{
地位：{
类型：布尔型，
通知：正确，
reflectToAttribute:真
}
},
就绪：函数（）{
this.$.plLoaderDialog.fitino=this；
这个.open（）；
},
状态：职能（e）{
if（this.hasAttribute（'hidden'）{return true}返回false；
},
开放：功能（e）{
var对话框=此。$.plLoaderDialog；
dialog.open（）；
此.removeAttribute（“隐藏”）；
},
关闭：功能（e）{
var对话框=此。$.plLoaderDialog；
dialog.close（）；
this.setAttribute（'hidden'，true）；
}
});
});

我已经导入并使用了
纸张对话框
，如何将其背景仅限于此元素？或者是页面上的特定元素，而不是整个窗口

<dom-module id="pl-loader">
    <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
        :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;
        }
  </style>
  <template>
        <content>
            <paper-dialog id="plLoaderDialog" fit-into="" auto-fit-on-attach="true" entry-animation="fade-in-animation"
              exit-animation="fade-out-animation" modal>
                <paper-spinner-lite active></paper-spinner-lite>
            </paper-dialog>
        </content>
    </template>
  <script>
        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);
                }
        });
    });
  </script>
</dom-module>

我试过
这个。$.plLoaderDialog.fitino=this但什么都不起作用

<dom-module id="pl-loader">
    <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
        :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;
        }
  </style>
  <template>
        <content>
            <paper-dialog id="plLoaderDialog" fit-into="" auto-fit-on-attach="true" entry-animation="fade-in-animation"
              exit-animation="fade-out-animation" modal>
                <paper-spinner-lite active></paper-spinner-lite>
            </paper-dialog>
        </content>
    </template>
  <script>
        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);
                }
        });
    });
  </script>
</dom-module>

其效果可见一斑。我不希望蓝色的纸头被背景遮住

<dom-module id="pl-loader">
    <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
        :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;
        }
  </style>
  <template>
        <content>
            <paper-dialog id="plLoaderDialog" fit-into="" auto-fit-on-attach="true" entry-animation="fade-in-animation"
              exit-animation="fade-out-animation" modal>
                <paper-spinner-lite active></paper-spinner-lite>
            </paper-dialog>
        </content>
    </template>
  <script>
        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);
                }
        });
    });
  </script>
</dom-module>

此外，
this.$.plLoaderDialog.setAttribute（fit-into，this）
以我想要的方式工作，但出现了一个错误
iron-fit-behavior.html:89未捕获类型错误：this.fitto.getBoundingClientRect不是一个破坏元素布局的函数

<dom-module id="pl-loader">
    <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
        :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;
        }
  </style>
  <template>
        <content>
            <paper-dialog id="plLoaderDialog" fit-into="" auto-fit-on-attach="true" entry-animation="fade-in-animation"
              exit-animation="fade-out-animation" modal>
                <paper-spinner-lite active></paper-spinner-lite>
            </paper-dialog>
        </content>
    </template>
  <script>
        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);
                }
        });
    });
  </script>
</dom-module>