0

If I have a custom web component in Polymer, is it possible to scope the template to be part of the main DOM (of index.html) and not be in the shadow?

I am trying to hook into an input that is activated by a script, and the script is not able to see the shadow DOM.

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="custom-element">

<template>

  // Code to be scoped for index.html

  <div id="script-selects-this-id-and-converts-div-to-input"></div>

</template>

  <script>

    Polymer({

      is: 'custom-element'

    });

  </script>

</dom-module>
KVNA
  • 847
  • 1
  • 11
  • 24

1 Answers1

0

well, you can of course point to to window object. This is propably not how shadow dom should work, but if you have some library you can control, then this is propably only solution. so inside custom-element script you can do something like:

ready: function() {
  window.reference = this;
}

if you try to console.log(window.reference) you can see there is whole custom-element

Kuba Šimonovský
  • 2,013
  • 2
  • 17
  • 35
  • When I ```console.log(window.reference)```, the element does populate in Dev Tools, although the element itself still has a ```#shadow-root``` that the script cannot locate. Is it possible to do something like ```window.reference = this.shadowRoot```? – KVNA Apr 26 '17 at 17:45
  • I seem to be getting close with the ```this.shadowRoot.innerHTML``` selector. – KVNA Apr 26 '17 at 17:48
  • if you do it with `this.shadowRoot`, you get html where you can call `.querySelector`, `getElementById` and so on, so i don't know where the problem is. Question is, what is your library doing, or how it finds elements – Kuba Šimonovský Apr 27 '17 at 07:44
  • I tried creating a node in ```index.html``` and attaching with ```getElementById```, but was getting console errors when using ```appendChild```. I was able to get the form to attach to the DOM with ```var square = this.shadowRoot.innerHTML; var node = document.querySelector('footer'); node.innerHTML += square; this.build;```. However, when using this strategy, the form attaches to the footer an all hope for formatting seems to be lost. – KVNA Apr 27 '17 at 14:31
  • The script that searches the DOM tree is from Square. More details from this problem can be found here: https://stackoverflow.com/questions/43620053/how-to-load-square-payment-form-in-shadow-dom – KVNA Apr 27 '17 at 14:33
  • I am trying to build a web component for Square payments, and the script in question can be downloaded at https://js.squareup.com/v2/paymentform – KVNA Apr 27 '17 at 14:34