can not work in IE ?

[littlee]

seems custom tag does not be supported IE

[hhsnopek]

Hey @littlee could you provide which version of IE as well as the json object you're passing into the ShareButton instance?

[littlee]

I just open the demo page in IE 11, but the button did not show up

[almoral]

Hey I'm having the same issue with IE 11. This is the json that I'm passing in:

        var share = new ShareButton({
            networks: {
                facebook: {
                    app_id: "xxxxxxxxxxxxxx"
                }
            }
        });

There are no error messages for me. It simply doesn't show up in the page.

[almoral]

I found this online:

Windows Internet Explorer's support for custom tags on an HTML page requires that a namespace be defined for the tag. Otherwise, the custom tag is treated as an unknown tag when the document is parsed. Although navigating to a page with an unknown tag in Internet Explorer does not result in an error, unknown tags have the disadvantage of not being able to contain other tags, nor can behaviors be applied to them.

Source Link

[hhsnopek]

This is very uneasy considering that before I pushed to make the switch to using custom tags I tested <share-button></share-button on IE and everything rendered and worked properly, minus a few IE quirks in our stylesheet. I do need to look into this more, if anyone finds more references or helpful documents please add them to the thread

[almoral]

Unfortunately I'm not getting an error in IE 11. It simply doesn't appear. I do get one in IE 9 but that's because of the use of classList. I'm assuming you don't plan to support IE9.

Here's a link to a test page.

Maybe you'll have better luck and get an actual error message in IE.

[hhsnopek]

If I recall the discussion correctly, the plan was support IE10 and higher

[almoral]

That makes sense. This is still happening in IE11 for me though. I wish I could provide more information.

[almoral]

I took a look at the styles that are being applied and display is set to 'none'. I'm looking through the code to see where that might be happening.

Updated: It looks like it might be the fact you're setting display to initial. IE doesn't support that.
Here's a link to MDN

[ehigz]

I was able to fix it by detecting whether it's IE using JS on my html page (index.html):

<script language="JavaSCRIPT">
       function msieversion(){
          var ua = window.navigator.userAgent
          var msie = ua.indexOf ( "MSIE " )

          if ( msie > 0 )      // If Internet Explorer, return version number
             return parseInt (ua.substring (msie+5, ua.indexOf (".", msie )))
          else                 // If another browser, return 0
             return 0
       }
</script>

(source: https://support.microsoft.com/en-us/kb/167820)

and then modifying share-button.js like so:

 /**
       * @method _show
       * @description Change element's display to 'block'
       * @private
       *
       * @param {DOMNode} el
 */
   {
      key: "_show",
      value: function _show(el) {
        el.style.display = "initial";
// my fix to make share-button element show in IE10 (haven't tested other version). 
//Can swap out 'inherit' with any display property.
        if (msieversion() >= 4) {
          el.style.display = "inherit";
          //console.log("This is Internet Explorer 4 or later");
        }

      }

[almoral]

Yeah browser sniffing is not the best approach. I just fixed it by changing the line

 el.style.display = "initial" 

to

el.style.display = "inline-block"

No browser sniffing and it works everywhere I've tested.

[hhsnopek]

This is great guys! @almoral which versions of IE does that work on?

[warch]

when does this change go live?

[almoral]

Inline-block works everywhere. I had a second issue with IE in that you use classList. So I used the classList.js polyfill. With that polyfill in place and display set to 'inline-block', this works in IE 9 +.

Here's a link to the polyfill.