How to use the @angular/compiler.CssSelector.parse function in @angular/compiler

const matcher = new SelectorMatcher();
    const pipes = new Map>>();
    let schemas: SchemaMetadata[] = [];

    const scope = this.scopeReader.getScopeForComponent(node);
    if (scope === 'error') {
      // Don't type-check components that had errors in their scopes.
      return;
    }

    if (scope !== null) {
      for (const meta of scope.compilation.directives) {
        if (meta.selector !== null) {
          const extMeta = flattenInheritedDirectiveMetadata(this.metaReader, meta.ref);
          matcher.addSelectables(CssSelector.parse(meta.selector), extMeta);
        }
      }
      for (const {name, ref} of scope.compilation.pipes) {
        if (!ts.isClassDeclaration(ref.node)) {
          throw new Error(
              `Unexpected non-class declaration ${ts.SyntaxKind[ref.node.kind]} for pipe ${ref.debugName}`);
        }
        pipes.set(name, ref as Reference>);
      }
      schemas = scope.schemas;
    }

    const bound = new R3TargetBinder(matcher).bind({template: meta.template.diagNodes});
    ctx.addTemplate(
        new Reference(node), bound, pipes, schemas, meta.template.sourceMapping,
        meta.template.file);

visitAttr(ast) {
            const element = path.head;
            if (!element || !(element instanceof ElementAst)) return;
            // Create a mapping of all directives applied to the element from their selectors.
            const matcher = new SelectorMatcher();
            for (const dir of element.directives) {
              if (!dir.directive.selector) continue;
              matcher.addSelectables(CssSelector.parse(dir.directive.selector), dir);
            }

            // See if this attribute matches the selector of any directive on the element.
            // TODO(ayazhafiz): Consider caching selector matches (at the expense of potentially
            // very high memory usage).
            const attributeSelector = `[${ast.name}=${ast.value}]`;
            const parsedAttribute = CssSelector.parse(attributeSelector);
            if (!parsedAttribute.length) return;
            matcher.match(parsedAttribute[0], (_, directive) => {
              symbol = info.template.query.getTypeSymbol(directive.directive.type.reference);
              symbol = symbol && new OverrideKindSymbol(symbol, DirectiveKind.DIRECTIVE);
              span = spanOf(ast);
            });
          },
          visitBoundText(ast) {

index(
      context: IndexingContext, node: ClassDeclaration, analysis: Readonly) {
    const scope = this.scopeReader.getScopeForComponent(node);
    const selector = analysis.meta.selector;
    const matcher = new SelectorMatcher();
    if (scope === 'error') {
      // Don't bother indexing components which had erroneous scopes.
      return null;
    }

    if (scope !== null) {
      for (const directive of scope.compilation.directives) {
        if (directive.selector !== null) {
          matcher.addSelectables(CssSelector.parse(directive.selector), directive);
        }
      }
    }
    const binder = new R3TargetBinder(matcher);
    const boundTemplate = binder.bind({template: analysis.template.diagNodes});

    context.addComponent({
      declaration: node,
      selector,
      boundTemplate,
      templateMeta: {
        isInline: analysis.template.isInline,
        file: analysis.template.file,
      },
    });
  }

querySelectorAll(el, selector) {
        const /** @type {?} */ res = [];
        const /** @type {?} */ _recursive = (result, node, selector, matcher) => {
            const /** @type {?} */ cNodes = node.childNodes;
            if (cNodes && cNodes.length > 0) {
                for (let /** @type {?} */ i = 0; i < cNodes.length; i++) {
                    const /** @type {?} */ childNode = cNodes[i];
                    if (this.elementMatches(childNode, selector, matcher)) {
                        result.push(childNode);
                    }
                    _recursive(result, childNode, selector, matcher);
                }
            }
        };
        const /** @type {?} */ matcher = new SelectorMatcher();
        matcher.addSelectables(CssSelector.parse(selector));
        _recursive(res, el, selector, matcher);
        return res;
    }
    /**

Parse5DomAdapter.prototype.elementMatches = function (node, selector, matcher) {
        if (matcher === void 0) { matcher = null; }
        if (this.isElementNode(node) && selector === '*') {
            return true;
        }
        var result = false;
        if (selector && selector.charAt(0) == '#') {
            result = this.getAttribute(node, 'id') == selector.substring(1);
        }
        else if (selector) {
            if (!matcher) {
                matcher = new SelectorMatcher();
                matcher.addSelectables(CssSelector.parse(selector));
            }
            var cssSelector = new CssSelector();
            cssSelector.setElement(this.tagName(node));
            if (node.attribs) {
                for (var attrName in node.attribs) {
                    cssSelector.addAttribute(attrName, node.attribs[attrName]);
                }
            }
            var classList = this.classList(node);
            for (var i = 0; i < classList.length; i++) {
                cssSelector.addClassName(classList[i]);
            }
            matcher.match(cssSelector, function (selector, cb) { result = true; });
        }
        return result;
    };

elementMatches(node, selector, matcher = null) {
        if (this.isElementNode(node) && selector === '*') {
            return true;
        }
        let /** @type {?} */ result = false;
        if (selector && selector.charAt(0) == '#') {
            result = this.getAttribute(node, 'id') == selector.substring(1);
        }
        else if (selector) {
            if (!matcher) {
                matcher = new SelectorMatcher();
                matcher.addSelectables(CssSelector.parse(selector));
            }
            const /** @type {?} */ cssSelector = new CssSelector();
            cssSelector.setElement(this.tagName(node));
            if (node.attribs) {
                for (const /** @type {?} */ attrName in node.attribs) {
                    cssSelector.addAttribute(attrName, node.attribs[attrName]);
                }
            }
            const /** @type {?} */ classList = this.classList(node);
            for (let /** @type {?} */ i = 0; i < classList.length; i++) {
                cssSelector.addClassName(classList[i]);
            }
            matcher.match(cssSelector, function (selector, cb) { result = true; });
        }
        return result;
    }

querySelectorAll(el, selector) {
        const /** @type {?} */ res = [];
        const /** @type {?} */ _recursive = (result, node, selector, matcher) => {
            const /** @type {?} */ cNodes = node.childNodes;
            if (cNodes && cNodes.length > 0) {
                for (let /** @type {?} */ i = 0; i < cNodes.length; i++) {
                    const /** @type {?} */ childNode = cNodes[i];
                    if (this.elementMatches(childNode, selector, matcher)) {
                        result.push(childNode);
                    }
                    _recursive(result, childNode, selector, matcher);
                }
            }
        };
        const /** @type {?} */ matcher = new SelectorMatcher();
        matcher.addSelectables(CssSelector.parse(selector));
        _recursive(res, el, selector, matcher);
        return res;
    }
    /**

querySelectorAll(el, selector) {
        const /** @type {?} */ res = [];
        const /** @type {?} */ _recursive = (result, node, selector, matcher) => {
            const /** @type {?} */ cNodes = node.childNodes;
            if (cNodes && cNodes.length > 0) {
                for (let /** @type {?} */ i = 0; i < cNodes.length; i++) {
                    const /** @type {?} */ childNode = cNodes[i];
                    if (this.elementMatches(childNode, selector, matcher)) {
                        result.push(childNode);
                    }
                    _recursive(result, childNode, selector, matcher);
                }
            }
        };
        const /** @type {?} */ matcher = new SelectorMatcher();
        matcher.addSelectables(CssSelector.parse(selector));
        _recursive(res, el, selector, matcher);
        return res;
    }
    /**

Parse5DomAdapter.prototype.elementMatches = function (node, selector, matcher) {
        if (matcher === void 0) { matcher = null; }
        if (this.isElementNode(node) && selector === '*') {
            return true;
        }
        var /** @type {?} */ result = false;
        if (selector && selector.charAt(0) == '#') {
            result = this.getAttribute(node, 'id') == selector.substring(1);
        }
        else if (selector) {
            if (!matcher) {
                matcher = new SelectorMatcher();
                matcher.addSelectables(CssSelector.parse(selector));
            }
            var /** @type {?} */ cssSelector = new CssSelector();
            cssSelector.setElement(this.tagName(node));
            if (node.attribs) {
                for (var /** @type {?} */ attrName in node.attribs) {
                    cssSelector.addAttribute(attrName, node.attribs[attrName]);
                }
            }
            var /** @type {?} */ classList = this.classList(node);
            for (var /** @type {?} */ i = 0; i < classList.length; i++) {
                cssSelector.addClassName(classList[i]);
            }
            matcher.match(cssSelector, function (selector, cb) { result = true; });
        }
        return result;
    };

elementMatches(node, selector, matcher = null) {
        if (this.isElementNode(node) && selector === '*') {
            return true;
        }
        let /** @type {?} */ result = false;
        if (selector && selector.charAt(0) == '#') {
            result = this.getAttribute(node, 'id') == selector.substring(1);
        }
        else if (selector) {
            if (!matcher) {
                matcher = new SelectorMatcher();
                matcher.addSelectables(CssSelector.parse(selector));
            }
            const /** @type {?} */ cssSelector = new CssSelector();
            cssSelector.setElement(this.tagName(node));
            if (node.attribs) {
                for (const /** @type {?} */ attrName in node.attribs) {
                    cssSelector.addAttribute(attrName, node.attribs[attrName]);
                }
            }
            const /** @type {?} */ classList = this.classList(node);
            for (let /** @type {?} */ i = 0; i < classList.length; i++) {
                cssSelector.addClassName(classList[i]);
            }
            matcher.match(cssSelector, function (selector, cb) { result = true; });
        }
        return result;
    }