Coder Social home page Coder Social logo

Comments (5)

WebReflection avatar WebReflection commented on June 8, 2024

what if you remove that child on oload? The registration of elements might be asynchronous if the readyState is not complete. This seems like a won't fix to me, also because IE8 support is experimental and this case doesn't look like a real-world one.

Last, but not least, I will not accept any other bug with such poor description.

from document-register-element.

acelan86 avatar acelan86 commented on June 8, 2024

thank u :) , and say sorry for my poor english.

and, i found in IE9, the detachCallback will call twice if i have two <x-a> in DOM but i only remove the node with id(only one)? or more

<!DOCTYPE html>
<html>
  <head>
    <title>Modern DOM</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,minimal-ui">
    <script src="build/document-register-element.max.js"></script>
  </head>
  <body>
    <x-a id="xx" style="background:red;height:100px;display:block;"/>
    <x-a></x-a>
    <script>
        var MyElement = document.registerElement(
          'x-a',
          {
            prototype: Object.create(
              HTMLElement.prototype, {
              detachedCallback: {value: function() {
                console.log('leaving the DOM :-( )');
              }}
            })
          }
        );
    </script>
    <script>
        var el = document.getElementById('xx');
        document.body.removeChild(el);
    </script>
  </body>
</html>

I found the code

function executeAction(action) {
  return function (node) {
    if (isValidNode(node)) {
      verifyAndSetupAndAction(node, action);
      loopAndVerify(
        node.querySelectorAll(query),
        action
      );
    }
  };
}

node.querySelectorAll(query) has some problem when removeChild，it will get all x-a element, no current node that be removed.

and then

function verifyAndSetupAndAction(node, action) {
  var
    fn,
    i = getTypeIndex(node)
  ;
  if (-1 < i) {
    patchIfNotAlready(node, protos[i]);
    i = 0;
    if (action === ATTACHED && !node[ATTACHED]) {
      node[DETACHED] = false;
      node[ATTACHED] = true;
      i = 1;
      if (IE8 && indexOf.call(targets, node) < 0) {
        targets.push(node);
      }
    } else if (action === DETACHED && !node[DETACHED]) {
      node[ATTACHED] = false;
      node[DETACHED] = true;
      i = 1;
    }
    if (i && (fn = node[action + 'Callback'])) fn.call(node);
  }
}

the code if (i && (fn = node[action + 'Callback'])) fn.call(node); execute every time

from document-register-element.

WebReflection avatar WebReflection commented on June 8, 2024

can you pleasae try to remove whatever you want after the onload event?

from document-register-element.

acelan86 avatar acelan86 commented on June 8, 2024

sorry, same result

 <script>
        window.onload = function () {
            var el = document.getElementById('xx');
            document.body.removeChild(el);
        };
 </script>

even，

 <script>
        window.onload = function () {
            setTimeout(function () {
                var el = document.getElementById('xx');
                document.body.removeChild(el);
            }, 1000);
        };
 </script>

please try it， maybe i was wrong， thank u

from document-register-element.

acelan86 avatar acelan86 commented on June 8, 2024

very very sorry it's my wrong~
i found the first <x-a> is a self-close tag, so has this wrong result

<x-a id="xx "/>

must be

<x-a id="xx"></x-a>

from document-register-element.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.